[css] 포스트에서 자주 사용되는 hover시 effect주기

 

사이트 포스트에서 많이 사용되는 hover시 style 입니다.

image background가 들어가고, view more 문구가 나타납니다. 

 

HTML

<div class="cover-thumbnail-list-1">                  
  <ul>
    <li>
      <a>
        <span class="thum">         
          <img src="XXX" alt="XXX" />
        </span>
        <div class="text-box">
          <span class="title">XXX</span>
        </div>
      </a>
    </li>
  </ul>
</div>

 

CSS

.cover-thumbnail-list-1 ul li .thum {
	position: relative;
}
.cover-thumbnail-list-1 ul li .thum:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255,255,255,0);
	transition: background-color .5s;
}
.cover-thumbnail-list-1 ul li:hover .thum:before {
	width:100%; 
	height:100%; 
	background:rgba(243, 156, 18, 0.65); 
}
.cover-thumbnail-list-1 ul li a .thum:after {
    content: 'VIEW MORE';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url(./images/arrow.svg) no-repeat center right 24px / 16px auto;
    opacity: 0;
    transition: .4s;
    z-index: 2;
    display: inline-block;
    padding: 15px 60px 15px 24px;
    border: 2px solid #fff;
    border-radius: 24px;
}
.cover-thumbnail-list-1 ul li:hover .thum::after {
	opacity: 1;
}