[Catherine RParticipant]

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

[Catherine RParticipant]

sorry, forgot to add the link:

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

[ChristopherModerator]

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.

[Catherine RParticipant]

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!

[ChristianModerator]

You need to use url() like

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

Thanks.

[Catherine RParticipant]

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!

[Nabeel AModerator]

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.

[Catherine RParticipant]

great, thanks so much!

[ChristianModerator]

You’re welcome Catherine.

[Catherine RParticipant]

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!

[RadModerator]

Hi Catherine,

Should be like this :

.x-img-none {
position: relative;
}
.x-img-none:hover:before {
content: url(http://www.paul-mccreesh.com/wp-content/uploads/2014/09/playbutton.jpg);
display: inline-block;
position: absolute;
right: calc( 50% - 30px );
top: calc( 50% - 34px );
opacity: none;
}

Tested and working but not at your page. There is something that pushing down the element. Would you mind providing an admin login?

Thanks.

[Catherine RParticipant]

thank you for your answer. I deleted the first code that you all sent and replaced it with this one. Works like a charm! thank you.

[Paul RModerator]

You’re welcome Catherine 🙂

[cyclonecParticipant]

When I add this to my css for my about us page
.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;
}

It looks ok for a while but then the icon goes and when I look at the css the \ has gone.

What want if for my hover over images effect on my about us page to be exactly like the ones at the bottom of this page https://www.eero.com/about-us#

I struggled to get the opcacity to come into effect – are you able to provide me some instruction on this?

[Paul RModerator]

Hi,

Try to add the code in your child theme’s style.css instead.

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

Can you provide us your site url so we could take a closer look.

Thanks

[Author]

Posts