CSS: changing image in div when hovering

Question

The goal: to build two blocks which should change their background color, text color and icon when hovering.

The trouble: I have no problem with background and text, but I found some difficulties with icons. How can I edit my HTML or CSS to reach the goal?

Here are my code: https://jsfiddle.net/teyrq0ze/ and images that should be used when hovering: http://i.imgur.com/8MqehqH.png, http://i.imgur.com/pNgIqxQ.png.

You should edit your question and paste the relevant code here. External links eventually became unavailable and prevent prospect users with similar issue to benefit from your question. — Andrej, Aug 03 '16 at 07:59

score 2 · Accepted Answer · edited May 23 '17 at 10:28

Add filter to image on hovering over the divs.

body {
  margin: 0;
  padding: 0;
  width: 100%;
  color: #333;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  background: #333;
}

#footerblurb {
  color: #fff;
}

#footerblurb-inner {
  margin: 0 auto;
  width: 650px;
}

#footerblurb .column1,
.column2 {
  float: left;
  display: table;
  width: 290px;
  padding: 15px;
  cursor: pointer;
  border: 1px dashed #fff;
  transition: all .1s ease-in-out;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
}

#footerblurb .column1 {
  margin-right: 6px;
}

#footerblurb .column1:hover,
.column2:hover {
  color: #333;
  background: #fff;
}

#footerblurb .column1 img {
  float: left;
  vertical-align: middle;
  display: table-cell;
}

#footerblurb .column2 img {
  float: right;
  vertical-align: middle;
  display: table-cell;
}

#footerblurb .column1 span {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

#footerblurb .column2 span {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
#footerblurb .column1:hover img,
#footerblurb .column2:hover img{
 -webkit-filter: invert(100%); 
 filter: invert(100%);
}

<div id="footerblurb">
  <div id="footerblurb-inner">

    <div class="column1" onclick="location.href=''">
      <span><img class="previous" src="http://i.imgur.com/0tnecTN.png"></span>
      <span>text text text</span>
    </div>
    <div class="column2" onclick="location.href=''">
      <span>text text text</span>
      <span><img class="next" src="http://i.imgur.com/e86z3mD.png"></span>
    </div>

    <div class="clr"></div>
  </div>
</div>

updated Demo here

you can use different filtering to give different colors.

For more information read this

Yes, I think so. But several people tried to help me, and I'm feeling a little comfortless choosing one "best" answer, all of them are good in own way. :) — KOKOC, Aug 03 '16 at 08:14

score 0 · Answer 2 · answered Aug 03 '16 at 07:51

Solution 1:

Add an extra image and hide it by default. toggle its visibility on hover. Here is the updated fiddle.

body {
  margin: 0;
  padding: 0;
  width: 100%;
  color: #333;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  background: #333;
}
#footerblurb {
  color: #fff;
}
#footerblurb-inner {
  margin: 0 auto;
  width: 650px;
}
#footerblurb .column1,
.column2 {
  float: left;
  display: table;
  width: 290px;
  padding: 15px;
  cursor: pointer;
  border: 1px dashed #fff;
  transition: all .1s ease-in-out;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
}
#footerblurb .column1 {
  margin-right: 6px;
}
#footerblurb .column1:hover,
.column2:hover {
  color: #333;
  background: #fff;
}
#footerblurb .column1:hover img,
#footerblurb .column2:hover img {
  display: none;
}
#footerblurb .column1 img.hover,
#footerblurb .column2 img.hover {
  display: none;
}
#footerblurb .column1:hover img.hover,
#footerblurb .column2:hover img.hover {
  display: initial;
}
#footerblurb .column1 img {
  float: left;
  vertical-align: middle;
  display: table-cell;
}
#footerblurb .column2 img {
  float: right;
  vertical-align: middle;
  display: table-cell;
}
#footerblurb .column1 span {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
#footerblurb .column2 span {
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}

<div id="footerblurb">
  <div id="footerblurb-inner">

    <div class="column1" onclick="location.href=''">
      <span><img class="previous" src="http://i.imgur.com/0tnecTN.png"><img class="previous hover" src="http://i.imgur.com/8MqehqH.png"></span>
      <span>text text text</span>
    </div>
    <div class="column2" onclick="location.href=''">
      <span>text text text</span>
      <span><img class="next" src="http://i.imgur.com/e86z3mD.png">
      <img class="next hover" src="http://i.imgur.com/pNgIqxQ.png"></span>
    </div>

    <div class="clr"></div>
  </div>
</div>

Solution 2:

Use background-image and toggle the image source on hover.

score 0 · Answer 3 · answered Aug 03 '16 at 08:00

0

Unless you have to use images for some reason. You could use an icon library like Font Awesome. Where you can easily change the colours as of your icons as they are treated as text, and are also very scalable.

.column1, .column2 {
  position:relative;
}
.column1:before {
  font-family: FontAwesome;
  content: "\f104";
  font-size:40px;
  position:absolute;
  left:70px;
  top:4px;
}
.column2:before {
  font-family: FontAwesome;
  content: "\f105";
  font-size:40px;
  position:absolute;
  left:70px;
  top:4px;
}

fiddle

answered Aug 03 '16 at 08:00

Matt2am

1

Could you please note, should I add some files into my website folder, or adding CSS code like yours will be enough? – KOKOC Aug 03 '16 at 08:06
http://fontawesome.io/ you can either download the stylesheet, or enter your email address, and youll be sent an embed code to stick in to your head. Have a look in the get started and examples pages, in how you would use the icons. – Matt2am Aug 03 '16 at 09:06

CSS: changing image in div when hovering

3 Answers3