css좀 봐주세요 마우스 오버할때
본문
이미지가 처음에는 약간 어둡게 있다가 마우스를 올렸을때 약간 밝아지면서 이미지가 약간 커지는 소스가 있습니다.
제가 이 이미지를 ;border-radius:1em 를 사용해서 모서리를 둥글게 했는데요
다 잘 되는데 마우스를 올리면 다시 각진 사각형이 됩니다.
이렇게 되었다가 마우스를 올리면
이렇게 되는데요 이미지가 밝아지는것도 좋고 약간 커지는것도 좋은데 다시 각이 생기는게 싫습니다.
라운드가 진 채로 커지고 싶은데요
소스는 아래와 같습니다.
<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>
.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}
한번 봐주시고 이미지가 커질때 각지지 않고 둥글게 커질수 있는 방법을 알려주세요
감사합니다.
답변 4
현재 자체가 오버했을경우 모서리 둥근 상태 그대로 확대처리 되고있는상태인데 이것을 아주 동그렇게 하고자 한다라는 뜻인지요?
아닙니다. 오버했을경우 각이 진 상태가 되어서 둥글게 하고싶다는 뜻인데
위 sinbi 님이 올려주신거 보면 둥글게 되어있네요?
왜그런지 모르겠네요 제 사이트에서 보면 각이 지는데...
중복처리되고잇느건아닌지 확인해보시기 바랍니다. 우선 모든 radius 처리부분을 인포텐트 적용하여 테스트 해보시기 바랍니다.
border-radius:1em !important;
이미지에 border-radius 주면여 ???
?
답변을 작성하시기 전에 로그인 해주세요.
