CODEWITHSUNDEEP
htmlcss
user5832968
user5832968

Reputation:

Changing image on hover without using an extra div

I'm trying to make my footer img change to a different img on hover, I've accomplished this by creating each img as a div, however, I'm trying to avoid this, is there any other possible way to do this?

Current CSS:

.footerLeft {
  float:left;
  width: 50%;
  height: 100px;
  color: #fff;
  background-color: #33383b;
}
.footerLeft p {
  margin-left: 25px;
}
.footerLeft img {
  width: 175px;
  height: 50px;
  padding-left: 25px;
  margin-top: 10px;
}
.footerRight {
  float:right;
  width: 50%;
  height: 100px;
  color: #fff;
  background-color: #33383b;
}
.footerRight img {
  width: 35px;
  height: 35px;
}
.footerRight p {
  text-align: right;
  position:relative;
  margin-top: -20px;
  margin-right: 20px;
}

Current HTML:

<div class="footerLeft">
<img src="img/logo.png">
<p>Sharpturn Network&copy; 2016</p>
</div>
<div class="footerRight">
<ul id="menu">
  <li><a href="https://www.facebook.com/SharpturnNetwork" target="_blank"><img src="img/footer/facebook.png"></a></li>
  <li><a href="https://www.twitter.com/SharpturnNet" target="_blank"><img src="img/footer/twitter.png"></a></li>
  <li><a href="https://www.youtube.com/sharpturnnetwork" target="_blank"><img src="img/footer/youtube.png"></a></li>
</ul>
<p>Designed by Ryan Williams</p>
</div>

Upvotes: 2

Views: 344

Answers (5)

Wazaraki
Wazaraki

Reputation: 504

EDIT: Note that some of the other answers will change the image when hovering any part of the whole footer container. This method changes the image only when hovering the image's region.

You could declare a pseudo-element on the footer container in the same position as the image to replace it on hover. Basically, using a combination of opacity and z-index you can hide the original image and show the pseudo element in the same place.

Here is an example of how to accomplish that:

.footerLeft:before {
    /* this creates the pseudo-element */
    width: 175px; /* Same as img */
    height: 50px;  /* Same as img */
    margin-left: 25px;  /* Same as img */
    margin-top: 10px;  /* Same as img */
    background: url(http://lorempixel.com/175/50/cats); /* your replacement img */
    position: absolute;
    z-index: 0;
    content: '';
}

.footerLeft img {
    width: 175px;
    height: 50px;
    margin-left: 25px; /* I used margin-left instead of padding-left */
    margin-top: 10px;
    position: relative; /* necessary for the z-index to work */
    z-index: 1; /* puts the img above the pseudo-element by default */
}

.footerLeft img:hover {
    opacity: 0; /* hides the original image on hover */
}

EDIT 2: If you want the social media icons to change images on hover, the process is similar. Create pseudo elements on each a tag with CSS, with the same dimensions as the original img. Configure a different replacement image for each icon:

.footerRight img {
  width: 35px;
  height: 35px;
  position: relative; /* enables the use of z-index */
  z-index: 1; /* puts the image on top by default */
  transition: opacity .2s; /* remove this for no smooth transtion */
}


.footerRight a:before {
  width: 35px; /* same a img */
  height: 35px; /* same a img */
  z-index: 0;
  content: '';
  position: absolute;
}

.footerRight li:nth-child(1) a:before {
  /* facebook icon */
  background: url(http://lorempixel.com/35/35/cats);
}

.footerRight li:nth-child(2) a:before {
    /* twitter icon */
  background: url(http://lorempixel.com/35/36/cats);
}

.footerRight li:nth-child(3) a:before {
  /* youtube icon */
  background: url(http://lorempixel.com/36/35/cats);
}

.footerRight img:hover {
  opacity: 0; /* hides the original image */
}

Note: This method has the advantage of loading the replacement images immediately. The same might not be true for other methods.

You can see the working example here: http://codepen.io/wilman/pen/mVZVzg

Upvotes: 0

caldera.sac
caldera.sac

Reputation: 5088

try this.just copy and pastea and try it.only have to replace your two images.

<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
  body{
    margin:0;
    padding:0;
  }

.imageOne{
  width: 500px;
  height: 500px;
  box-shadow: 1px 2px 1px black;
  background-image: url(http://www.ron-gatepain.com/images/Golden_Gate_Bridge.JPG?306);
  background-repeat: no-repeat;
}

.imageTwo{
  width: 500px;
  height: 500px;
  box-shadow: 1px 2px 1px black;
  background-image: url(http://gym1526-english.narod.ru/images/Statue.jpg);
  background-repeat: no-repeat;
}

</style>

</head>
<body>

<div id="myimage" class="imageOne">

</div>


<script type="text/javascript">
 $(document).ready(function(){
   $("#myimage").mouseenter(function(){
    $(this).addClass("imageTwo").removeClass("imageOne");
   });

   $("#myimage").mouseleave(function(){
    $(this).addClass("imageOne").removeClass("imageTwo");
   });
 });
</script>

</body>



</html>

Upvotes: 1

Soda
Soda

Reputation: 67

As @partians said, just added "background-size" as cover, I assumed that you need that. 

footer {
  width: 900px;
  height: 600px;
  background-image: url("http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg");
  background-size: cover
}

footer:hover {
  background-image: url("http://image2.redbull.com/rbcom/010/2013-07-25/1331603705670_2/0010/1/900/600/2/red-bull-illume.jpg");
}
<footer> </footer>

Upvotes: 1

amflare
amflare

Reputation: 4103

Set one img as the background img, and the other as the background img on hover.

footer {
  background-image: url(...);
}
footer:hover {
  background-image: url(...);
}

Upvotes: 2

Dave
Dave

Reputation: 29121

The only alternative I can think of to using a div (or some other element with background image) is to use JavaScript. This will allow you to change the 'src' of the image on hover.

element.setAttribute('src', 'http://www.example.com/image.jpg');

Upvotes: 1

Related Questions