css좀 봐주세요 마우스 오버할때

smltree

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4개월 전 844

이미지가 처음에는 약간 어둡게 있다가 마우스를 올렸을때 약간 밝아지면서 이미지가 약간 커지는 소스가 있습니다.

제가 이 이미지를 ;border-radius:1em 를 사용해서 모서리를 둥글게 했는데요

다 잘 되는데 마우스를 올리면 다시 각진 사각형이 됩니다. 3034902428_1760071205.5753.jpg

이렇게 되었다가 마우스를 올리면

3034902428_1760071221.8523.jpg

이렇게 되는데요 이미지가 밝아지는것도 좋고 약간 커지는것도 좋은데 다시 각이 생기는게 싫습니다.
라운드가 진 채로 커지고 싶은데요

소스는 아래와 같습니다.

Copy

<a href="#" class="banner1">
                <div class="photo_box">
                    <img src="/img/banner_bg1.png" alt="">
                    <div class="ovrly"></div>
                    <h3 class="title">회사소개</h3>      
                </div>
                        
            </a>

Copy

.banner_wrap .photo_box{position:relative;;border-radius:1em}
.banner_wrap .photo_box img{width:100%;top:0;height:100%;position:relative;left:0;-webkit-transition: -webkit-transform 0.3s;-moz-transition: -moz-transform 0.3s;-o-transition: -o-transform 0.3s;transition: transform 0.3s;;border-radius:1em}
.banner_wrap .photo_box:hover img{-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1)}
.banner_wrap .photo_box .ovrly{background:rgba(0,0,0,0.2);width:100%;height:100%;position:absolute;left:0;top:0;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;border-radius:1em}
.banner_wrap .photo_box:hover .ovrly{opacity:0.1;border-radius:1em}

한번 봐주시고 이미지가 커질때 각지지 않고 둥글게 커질수 있는 방법을 알려주세요

감사합니다.

그누보드5 css