CREATE A IMAGE OVERLAY EFFECT | Text Over an Image Hover Without JavaScript BK Tutorial

 

Source Code:

1) Index.html

<link rel="stylesheet" href="style.css" />

<div class="wrapper">

  <img src="nightyngle.jpg">

   <div class="content">

     <div class="text_area">Nightyngle

      <div class="text"><p> You can easily record and edit videos at professional quality but with very little effort and cost!SmartPixel is an easy-to-use, powerful video recording and editing software, which integrates game/screen/webcam recording, video editing, dubbing and background music arranging.</p></div>

   </div>

 </div>

</div> 

 

   <div class="wrapper">

  <img src="cat.jpg">

   <div class="content">

     <div class="text_area">Cat

       <div class="text"><p> You can easily record and edit videos at professional quality but with very little effort and cost!SmartPixel is an easy-to-use, powerful video recording and editing software, which integrates game/screen/webcam recording, video editing, dubbing and background music arranging.</p></div>

    </div>

   </div>

</div>   

   

   <div class="wrapper">

  <img src="image (5).jpg">

   <div class="content">

     <div class="text_area"> Sparrow 

       <div class="text"><p> You can easily record and edit videos at professional quality but with very little effort and cost!SmartPixel is an easy-to-use, powerful video recording and editing software, which integrates game/screen/webcam recording, video editing, dubbing and background music arranging.</p></div>

    </div>

   </div>

 </div>  

2) style.css

@charset "utf-8";

/* CSS Document */

body

{

  width:960px;

  margin:150px auto;

}

.wrapper

{

  width:280px;

  height:280px;

  float:left;

  margin-right:20px;

  box-shadow:0px 0px 25px #000;

  border:solid 10px #FFF;

  overflow:hidden;

}

.wrapper img

{

  width:100%;

  height:100%;

}

.content

{

  width:280px;

  height:280px;

  background:#000;

  opacity:0.6;

  transition:transform 3000ms;

  position:relative;

}

.wrapper:hover .content

{

  transform:translateY(-285px);

}

.text_area

{

  color:#FFF;

  width:100%;

  height:100%;

  background:#00300a;

  text-align:center;

  padding-top:10px;

  position:absolute;

  margin:0 auto;

  font-family:arial;

  font-size:20px;

  font-weight:bold;

  cursor:pointer;

  display:none;

}

.wrapper:hover .text_area

{

  display:block;

}

.text_area .text

{

  color:#ccc;

  font-size:18px;

}

.wrapper:hover img

{

  transform:scale(3,3);

}