HTML/CSS Image Rollover/Animation, specific case with existing code, how to change animation? -

ok, have don web development in past, new "css/webkit" animations.

i have image on website, goes through animation when user "hovers" on image, so:

what want change animation.

i want remove red "arrows" icon @ bottom-right. think want keep opacity transition, but, want display different image, if user hovering on image.

here html code image:

<div class="col-md-4">                              <div class="team" data-animation-name="fadeinright">                                  <div class="team-photo">                                     <figure>                                         <img src="demo/team/dfds_seaways_ship.jpg" alt="">                                         <figcaption>                                             <a href="#">                                                 <i class="gi gi-resize-full"></i>                                             </a>                                         </figcaption>                                     </figure>                                 </div> 

i did not write code, , am, unfortunately, quite lost.

i think should show "css-classes" used here.

    /* ==========================================================================     team ============================================================================= */ .team {   -webkit-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0);   margin-bottom: 30px; } .team .team-photo {   position: relative;   margin-bottom: 15px;   overflow: hidden; } .team .team-photo figcaption {   position: absolute;   left: 0;   top: 0;   width: 100%;   height: 100%;   background-color: rgba(255, 255, 255, 0.5);   -webkit-transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);   transition: opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);   opacity: 0; } .team .team-photo figcaption {   display: block;   position: absolute;   z-index: 1;   width: 44px;   height: 44px;   overflow: hidden;   right: 0;   bottom: 0;   text-align: center;   text-decoration: none;   color: #fff;   background-color: #e35a55;   -webkit-transform-origin: 100%;   -moz-transform-origin: 100%;   -ms-transform-origin: 100%;   transform-origin: 100%;   -webkit-transform: rotate(-90deg);   -ms-transform: rotate(-90deg);   transform: rotate(-90deg);   -webkit-transition: -webkit-transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);   transition: -webkit-transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .team .team-photo figcaption .fa, .team .team-photo figcaption .gi {   width: 44px;   height: 44px;   line-height: 44px;   font-size: 16px; } .team .team-photo figcaption a:hover {   background-color: #000; } .team:hover .team-photo figcaption, .team.touch .team-photo figcaption {   opacity: 1; } .team:hover .team-photo figcaption a, .team.touch .team-photo figcaption {   -webkit-transform: rotate(0);   -ms-transform: rotate(0);   transform: rotate(0);   .team .team-info {   text-align: center;   padding: 0 15px; } .team .team-name {   margin: 0; } .team .team-data {   display: none; } 

i tried "just" adding onmouseover , onmouseoutevents, allthough unsure if right/best way this, so:

<img src="demo/team/dfds_seaways_ship.jpg" alt="" onmouseover="this.src='demo/team/dfds_seaways_ship2.jpg'" onmouseout="this.src='demo/team/dfds_seaways_ship.jpg'"> 

but isn't working. naive approach, web dev knowledge while ago, conforming css approach taken here developers of site.

to honest, lost, if can me, or explain me how can css code available, extremely happy, can done.

if more information needed, let me know. , hope gif above (of ship) displays fine, on machine doesn´t display correctly on ie, on chrome displays fine.

thanks , help!

c

in case place image on image , keep hidden. on hover make visible. better imo adding javascript event , more versatil insteed of "display:none" may use opacity better changing image transition.

i have made fiddle can see example.

this css's have added yours :

.other-image {     position:absolute;     top:0;     left:0;     opacity:0;     -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease;  } .team:hover .other-image {     opacity:1; } 

and few lines may ignore make figcaption works intended (you may have anywhere in project):

figure {margin:0; position:relative;} .team .team-photo {display:inline-block;}  img {display:block;} 

to remove figcaption @ easy figcaption {display:none} or if want change position of caption change value of right , bottom @ .team .team-photo figcaption a. if want specific change figcaption guess may explain want it.