hover시 background-images 확대하기

 

background-image를  hover하면 이미지가 커지게 하려고 한다

 

원본에서는 이미지 뿐만아니라 hover시 글씨와 배경이 같이 깔리도록 작업했는데 정리해 두면 나중에 유용하게 사용할거 같아서 정리해둔다.

 

 

 

윗이미지는 hover전 이미지고

아래 이미지는 hover시 이미지이다.

 

이미지가 살짝 커지고 그 위로 로고와 배경이 한번 더 깔린다.

 

 

 

html.

 <div class="wrapper">
       <div class="parent" onclick="">
            <div class="child bg-one">
            <a href="#">Los Angeles</a>
            </div>
     </div>
</div>

 

css.

.wrapper {
    padding: 50px 50px;
    max-width: 1200px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px; }

 

.parent {
    width: 45%;
    margin: 20px;
    height: 300px;
    border: 1px solid blue;
    overflow: hidden;
    position: relative;
    float: left;
    display: inline-block;
    cursor: pointer; }

.child {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s; }

 

.bg-one {background-image: url(//www.media.timeout.com/images/101602611/image.jpg);}

 

a { display: none;
    font-size: 35px;
    color: #ffffff !important;
    font-family: sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50px;  }

.parent:hover .child, .parent:focus .child {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.parent:hover .child:before, .parent:focus .child:before {  display: block; }

.parent:hover a, .parent:focus a { display: block; }

.child:before {
    content: "";
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(52,73,94,0.75);
}

 

 

출처: css-tricks.com/zooming-background-images/