목록으로

css좀 봐주세요 마우스 오버할때 채택완료

smltree

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

3개월 전 조회 588

답변 4

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

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

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

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

3034902428_1760071221.8523.jpg

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

소스는 아래와 같습니다.

Copy

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