Today I'll show how you can show text on image hover - if you hover an image, then the image will fade and a text will open.
I've used here Bootstrap3.
At first, create a folder and keep their all files including Bootsrap and open the index.html
At first, create a folder and keep their all files including Bootsrap and open the index.html
<DOCTYPE html> !
<lang="en"> html
<> head
<charset="UTF-8"> meta
<>Ready to code - Made with Love</title> title
<name="viewport" content="width=device-width, initial-scale=1 meta 0"> .
<name="description" content="A responsive Ready code Bootstrap site." /> meta
<name="keywords" content="css3, perspective, 3d, meta , responsive, template" /> jquery
<name="author" content="http://themepack.net" /> meta
<rel="shortcut icon" href="images/favicon link . "> ico
<rel="stylesheet" href="style.css"> link
</> head
<> body
<class="container"> div
<class="row"> div
<h2>Caption hover effect </h2>
<>Image caption with a text previewed in the bottom</p> p
<>Width size doesn´t matter</p> p
</> div
<class="row"> div
<class="col- div -3"> lg
<div class="cuadro_intro_hover " style="background-color:#cccccc;">
<style="text-align p center; margin-top : 20px;"> :
<src="http img // : placehold it/500x330" class=" . -responsive" alt=""> img
</p>
<class="caption"> div
<class="blur"></ div > div
<class="caption-text"> div
<h3 style="border-top2px solid white; border-bottom : 2px solid white; padding : 10px;">THIS IS H3</h3> :
<p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p>
<class=" a btn -default" href="#"><span class=" btn glyphicon -plus"> INFO</span></a> glyphicon
</> div
</> div
</> div
</> div
<class="col- div -3"> lg
<div class="cuadro_intro_hover " style="background-color:#cccccc;">
<style="text-align p center; margin-top : 20px;"> :
<src="http img // : placehold it/500x330" class=" . -responsive" alt=""> img
</p>
<class="caption"> div
<class="blur"></ div > div
<class="caption-text"> div
<h3 style="border-top2px solid white; border-bottom : 2px solid white; padding : 10px;">THIS IS H3</h3> :
<p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p>
<class=" a btn -default" href="#"><span class=" btn glyphicon -plus"> INFO</span></a> glyphicon
</> div
</> div
</> div
</> div
<class="col- div -3"> lg
<div class="cuadro_intro_hover " style="background-color:#cccccc;">
<style="text-align p center; margin-top : 20px;"> :
<src="http img // : placehold it/300x330" class=" . -responsive" alt=""> img
</p>
<class="caption"> div
<class="blur"></ div > div
<class="caption-text"> div
<h3 style="border-top2px solid white; border-bottom : 2px solid white; padding : 10px;">THIS IS H3</h3> :
<p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p>
<class=" a btn -default" href="#"><span class=" btn glyphicon -plus"> INFO</span></a> glyphicon
</> div
</> div
</> div
</> div
<class="col- div -3"> lg
<div class="cuadro_intro_hover " style="background-color:#cccccc;">
<style="text-align p center; margin-top : 20px;"> :
<src="http img // : placehold it/1000x330" class=" . -responsive" alt=""> img
</p>
<class="caption"> div
<class="blur"></ div > div
<class="caption-text"> div
<h3 style="border-top2px solid white; border-bottom : 2px solid white; padding : 10px;">THIS IS H3</h3> :
<p>Loren ipsum dolor si amet ipsum dolor si amet ipsum dolor...</p>
<class=" a btn -default" href="#"><span class=" btn glyphicon -plus"> INFO</span></a> glyphicon
</> div
</> div
</> div
</> div
</> div
</> div
</> div
<src="js/jquery script . "></script> js
<src=" script /bootstrap js min . . "></script> js
<src=" script /custom js . "></script> js
</> body
</> html
See carefully that I've added
@import urlcss/bootstrap ( min . . ); css
@import urlcss/font-awesome ( min . . ); css
@import urlcss/custom-style ( . ); css
@import urlcss/responsive.css); (
cuadro_intro_hover . { padding : 0px;
: relative; position
: hidden; overflow
: 200px; height
}
cuadro_intro_hover . hover : . caption { opacity : 1;
: transform translateY -150px); (
--transform webkit : translateY -150px); (
--transform moz : translateY -150px); (
--transform ms : translateY -150px); (
--transform o : translateY -150px); (
}
cuadro_intro_hover . img { z -index: 4;
}
cuadro_intro_hover . . caption { position : absolute;
top 150px; :
--transition webkit all 0.3s ease-in-out; :
--transition moz all 0.3s ease-in-out; :
--transition o all 0.3s ease-in-out; :
--transition ms all 0.3s ease-in-out; :
transition all 0.3s ease-in-out; :
: 100%; width
}
cuadro_intro_hover . . blur { background -color:rgba 0,0,0,0.7); (
: 300px; height
-index: 5; z
: absolute; position
: 100%; width
}
cuadro_intro_hover . . -text caption { z -index: 10;
: #fff; color
: absolute; position
: 300px; height
-align: center; text
top -20px; :
: 100%; width
}
You can download all source files from here
