change image or add icon on hover image – Themeco Community

change image or add icon on hover image

Catherine R — Mon, 08 Sep 2014 08:23:25 +0000

hi X,
I’m looking to add a play button (or arrow icon) when the mouse rolls over the image.

the opacity is fine, but I just want to make clear that when someone clicks on the image they will play the video.
Hoping this is possible!

many thanks, catherine

Reply To: change image or add icon on hover image

Catherine R — Mon, 08 Sep 2014 08:23:42 +0000

sorry, forgot to add the link:

http://www.paul-mccreesh.com/video/

Reply To: change image or add icon on hover image

Christopher — Mon, 08 Sep 2014 08:41:53 +0000

Hi there,

Please add this under Customize -> Custom -> CSS

.x-img-none:hover:before {
  color: red;
  content: "\f04b";
  display: inline-block;
  font-family: fontawesome;
  font-size: 43px;
  position: absolute;
  right: 46%;
  top: 31%;
  transition: opacity 0.3s ease 0s;
  z-index: 200;
}

Hope it helps.

Reply To: change image or add icon on hover image

Catherine R — Mon, 08 Sep 2014 09:18:10 +0000

this is great, just one quick question: if I want to add an image where it says content: what do I use?
I’ve uploaded the image, just can’t make it work with the code you supplied.
many thanks!

Reply To: change image or add icon on hover image

Christian — Mon, 08 Sep 2014 09:29:39 +0000

You need to use url() like

content: url(http://icons.iconarchive.com/icons/blackvariant/button-ui-system-folders-drives/32/Burnable-icon.png);
};

Thanks.

Reply To: change image or add icon on hover image

Catherine R — Mon, 08 Sep 2014 19:31:57 +0000

ok, I realize I am getting very picky now, but might it be possible to have the background fade and set the icon to no opacity?
Or are the two too intertwined?

thank you for your answer to this very detailed question!

Reply To: change image or add icon on hover image

Nabeel A — Mon, 08 Sep 2014 19:50:22 +0000

Hi Catherine,

The opacity is already disabled however you can set the opacity to 1 to have no-opacity effect, add this code via Appearance > Customize > Custom > CSS

.x-img-none:hover:before {
opacity: 1 !important;
}

For the background you can set fade out effect only, which will hide the image with fading effect.

Reply To: change image or add icon on hover image

Catherine R — Tue, 09 Sep 2014 08:42:55 +0000

great, thanks so much!

Reply To: change image or add icon on hover image

Christian — Tue, 09 Sep 2014 08:49:25 +0000

You’re welcome Catherine.

Reply To: change image or add icon on hover image

Catherine R — Thu, 11 Sep 2014 19:41:23 +0000

One more question on this X, because I am not so sure it is possible:

when the screen is reduced, the play button shifts (obvious). How might it be possible to pair this with a code for mobile devices?
many thanks!