html - change image on hover and keep the text -


i working wordpress , bootstrap . trying have 1 image on every colum containter , , change image on hover , keep text before on original image .. there way css3 or need use js ? here html code :

<?php get_header(); ?>        <div class="page-header">       <h1 class="titletxt">eco greece</h1>       </div>       <div class="row">           <div class="col-md-6 imageholder img1">             <div class="overlay img1">               <span class="plus"> walking </span>               </div>            </div>         <div class="col-md-6 imageholder img2">         <div class="overlay img2">               <span class="plus"> walking </span>               </div>         </div>       </div>       <div class="row">         <div class="col-md-6 imageholder img3">         <div class="overlay img3">               <span class="plus"> marine tour </span>               </div>         </div>         <div class="col-md-6 imageholder img4">         <div class="overlay img4">               <span class="plus"> birds watching </span>               </div>         </div>       </div>   <?php get_footer(); ?> 

and here css :

.imageholder {     position: relative; } .imageholder.img1 {     background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/bear.png') no-repeat;     background-size: cover;     height: 420px;     background-position: center center; } .imageholder.img2 {     background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/bridge.png') no-repeat;     background-size: cover;     height: 420px;     background-position: center center; } .imageholder.img3 {     background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/couple.png') no-repeat;     background-size: cover;     height: 420px;     background-position: center center; } .imageholder.img4 {     background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/bird.png') no-repeat;     background-size: cover;     height: 420px;     background-position: center center; }  .overlay {     background-repeat:no-repeat;     position: relative;     text-align: center;     opacity: 0;     padding:180px 0 100px 0;     -webkit-transition: opacity .5s ease;     -moz-transition: opacity .5s ease;  } .overlay.img1 {     background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/bear_over.png') no-repeat;     height: 420px;     background-position: center center;     background-size: cover; } .overlay.img2 {     background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/bridge_over.png') no-repeat;     height: 420px;     background-position: center center;     background-size: cover; } .overlay.img3 {     background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/couple_over.png') no-repeat;     height: 420px;     background-position: center center;     background-size: cover; } .overlay.img4 {     background: url('http://localhost/eco-greece/wp-content/themes/ecotheme/img/bird_over.png') no-repeat;     height: 420px;     background-position: center center;     background-size: cover; } .imageholder:hover .overlay {     opacity: 1; } .ec-imagetext {     background-repeat: no-repeat;     position: relative;     text-align: center;     opacity: 1;     padding:180px 0 100px 0; } .plus {     position: relative;     opacity: 1;     font-family: myriadpro;     color:rgba(255,255,255,.85);     font-size: 45px; } 

with code , image changes on hover , show text , want text on original image ..

i don't understand question, i'll give shot. use :hover selector , change url() background-image made simple fiddle you.


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

Kivy: Swiping (Carousel & ScreenManager) -