Image Hover Effects

show text on image hover css
show text on image hover css
show text on image hover css

Hello friends today in this article we will learn how to show multiple image detail on image hover.

For Example in this tutorial we will show the movie detail on Image hover Effect.

HTML CODE

 <div class="swiper-slide">
          <img src="3.jpg" />
          <!--Hover Content-->
           <div class="video_content">
              <div class="left_con">
                 <div class="play_btn">
                    <div class="circle"><i class="fa fa-play" aria-hidden="true"></i></div>
                 </div>
                 <div class="vid_name">Street Dancer</div>
                 <div class="vid_detail">
                    <ul class="vid_list">
                      <li class="c_green">99% Match</li>
                      <li class="br_round">13+</li>
                      <li>2h:33m</li>
                    </ul>
                 </div>
                 <div class="vid_category">
                   <ul class="vid_list">
                      <li>Action</li>
                      <li>Drama</li>
                      <li>Comedy</li>
                    </ul>
                 </div>
                 <div class="down_arrow">
                   <i class="fa fa-chevron-down"></i>
                 </div>
              </div>
           </div>
           <!--End Hover Content-->
        </div>

CSS CODE

body
{
	 font-family: 'Open Sans' ;
}

ul,li
{
	margin:0px;
	padding:0px;
}

.swiper-slide
{
	
	width:400px;
	height:240px;	
	position:relative;
	cursor:pointer;
	transition:all ease-in-out 0.3s;

}

.swiper-slide img
{
	width:400px;
	height:240px;	
	z-index:1;
}


.swiper-slide:hover .video_content
{
	display:block;
	
}

.video_content
{
	display:none;
	position: absolute;
	top:0;
	left:0;
	background: rgba(0,0,0,0.8);
	width: 400px;
	height: 240px;
	z-index:2;
	transition:all ease-in-out 0.3s;
}

.left_con
{
	position:absolute;
	bottom:0;
	margin-left:20px;
}

.circle
{
	width:20px;
	height:20px;
	position:relative;
	border:1px solid #fff;
	border-radius:100%;
}

.circle:hover i
{
	color:red;
}


.circle i
{
	position:absolute;
	left:60%;
	color:#fff;
	font-size:12px;
	top:50%;
	transform:translate(-60%,-50%);
}

.vid_name
{
	font-size:18px;
	color:#fff;
}


.vid_list 
{
	list-style:none;
}

.vid_list li
{
	display:inline-block;
	font-size:13px;
	color:#fff;
}

.br_round
{
	border:1px solid #f2f2f2;
	padding-left:3px;
	padding-right:3px;
	line-height:13px;
}

.c_green
{
	color:#f60;
	font-weight:600;
}

.right_con
{
  right:10px;
  bottom:0;
  position:fixed;
}

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Shubham chauhan Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Shubham chauhan
Guest

Very nice article, thanks for the artical

Shubham chauhan
Guest

Nice article