Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="images">
    <div class="image1">
      <img src="http://placehold.it/350x150" width=200px height=auto id="img1">
      <p> Image 1 text </p>
    </div>
    <br>
    
    <div class="image2">
       <img src="http://placehold.it/350x150" width=200px height=auto id="img2">
      <p> Image 2text </p>
    </div>
   
    
  </div>
</body>
</html>
 
.hoverClass {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}
 
$( ".image1" ).hover(
  function() {
    
    $('.image2').hide();
    $('#img1').addClass('hoverClass');
  }, function() {
    
    $('#img1').removeClass('hoverClass');
    $('.image2').show();
  }
);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Ajeeypro
0viewers