Transparent Hovering Image Help

[bLAZYY]

Im a rookie to the css and html industry and im in need of some help so would be grateful if anyone could solve my problem.

Im trying to make a transparent colour hover over my thumbnail photo in my portfolio section of the website but i cant seem to work it out, currently whats happening is i manage to get the opacity at 30% and it works but its showing the white background of my body behind the hover and not the thumbnail image

Please if anyone could give me some advice i would appreciate it .

Kind Regards

[Paulie_D]

You can do this with a psuedo element BUT you can’t apply those to an image.

So, if you wrap the image in a block level element such as a div or figure, you can apply the pseudo element to that.

Like this: http://codepen.io/anon/pen/uEnBm

[bLAZYY]

Thanks for the really quick reply Paulie, like i said I’m a rookie and what you’ve posted is exactly what i was looking for but im not sure i understand it 100% from what i can see you’ve applied a wrap around the image and added a hover on top of that? Will this allow the image to still be linkable?

I like to learn things so want to understand how they work rather then just copying code but i will attempt to use what you sent on code pen and implement it onto my site

Thank you very much

Kind regards

[Paulie_D]

Oh….you want the image to be a link…that’s even better.

No need for the div as the anchor can be used instead…

http://codepen.io/anon/pen/fALbG

I’ve added a couple of comments as well.

[bLAZYY]

I will try that now and see how i get along, for me its a bit different because im using wordpress and editing a template cos im a beginner :)

http://www.hkinteriors.co.uk

that’s the link to the website if ur interested

Thanks again Paulie appreciate it

[bLAZYY]

Paulie in codepen the output is showing the box below the image not on top of it any idea why that’s happening?

[bLAZYY]

Cant get it to work :( i use wordpress and my page consists of the following

” class=”“>

‘Thumbnail’, ‘size’ => ‘archive-thumbnail’, ‘image_class’ => ‘featured’, ‘width’ => 220, ‘height’ => 150, ‘default_image’ => get_template_directory_uri() . ‘/images/archive_image_placeholder.png’ ) );

} ?>

<

What i attempted to do is add a Wrap around this part shown in the example below

#128627

Paulie_D

Member

>Paulie in codepen the output is showing the box below the image not on top of it any idea why that’s happening?

Not in Chrome it isn’t unless I’m missing something.

Can’t help you with WP but I thought you weren’t going down the ‘wrapper’ option.

#128629

bLAZYY

Member

Ah a simple display: block; has fixed it for me in firefox when viewing it in codepen

np paulie you’ve been a great help I’ve managed to get somewhere with it take a look

[http://www.hkinteriors.co.uk](http://www.hkinteriors.co.uk “HKInteriors”)

Now i need to try get it to work without the dark orange there but the writing still there

#128634

bLAZYY

Member

Damn it cant work it out, wordpress makes it 2 hard 2 work with :( tried everything no luck

thanks anyways Paulie

#128637

Paulie_D

Member

Not entirely sure what it is you are trying to change on the current site.

If you mean the text that appears when I hover over one of the 4 images/links then the background color can be found on line 775 of your CSS file so you could change that to whatever you want.

Remember though, the text in that box is white so you can’t just remove it as the underlying color is white as well.

The underlying color is found on line 757 of your stylesheet.

PLEASE NOTE: Although changing these will fix THIS issue it might cause problems if the classes are used again.

#128651

bLAZYY

Member

Yeah its the 4 images with the colour on hover, i want it to bring up a transparent orange with the text on it when i hover over but whenever i set an opacity or add your pseudo code it doesn’t work, if i try to edit the code on line 775 with an opacity attribute it makes the transparency of the background not the picture if that makes sense

and if i add your bit of code it just doesn’t do anything when i hover over

It wont even let me remove the colored background, ive tried using Background: transparent; and background: none; as well as removing it all together but it still brings up a background

#128658

Paulie_D

Member

You can ignore all the previous stuff I said about pseudo elements etc. as I thought you were talking about something else not related to the front page.

Line 775 has the background color….it’s set to orange at the moment. If you want it to be slightly transparent you **can’t** use opacity there are it will affect everything in the [a] link including the text.

You will only have to change the background color to something like

background: rgba(255,165,0,0.5)

where the 0.5 number is the amount of opacity you want on that color.

That’s the only thing you need to change.

#128865

bLAZYY

Member

Hi Paulie thanks for the reply, i added it to the line but whats happening is the same as previously explained it doesn’t make the colour transparent so that you can see the picture behind it but instead it shows the white background of the container/body behind the picture

[Paulie_D]

>Paulie in codepen the output is showing the box below the image not on top of it any idea why that’s happening?

Not in Chrome it isn’t unless I’m missing something.

Can’t help you with WP but I thought you weren’t going down the ‘wrapper’ option.

[bLAZYY]

Ah a simple display: block; has fixed it for me in firefox when viewing it in codepen

np paulie you’ve been a great help I’ve managed to get somewhere with it take a look

[http://www.hkinteriors.co.uk](http://www.hkinteriors.co.uk “HKInteriors”)

Now i need to try get it to work without the dark orange there but the writing still there

[bLAZYY]

Damn it cant work it out, wordpress makes it 2 hard 2 work with :( tried everything no luck

thanks anyways Paulie

[Paulie_D]

Not entirely sure what it is you are trying to change on the current site.

If you mean the text that appears when I hover over one of the 4 images/links then the background color can be found on line 775 of your CSS file so you could change that to whatever you want.

Remember though, the text in that box is white so you can’t just remove it as the underlying color is white as well.

The underlying color is found on line 757 of your stylesheet.

PLEASE NOTE: Although changing these will fix THIS issue it might cause problems if the classes are used again.

[bLAZYY]

Yeah its the 4 images with the colour on hover, i want it to bring up a transparent orange with the text on it when i hover over but whenever i set an opacity or add your pseudo code it doesn’t work, if i try to edit the code on line 775 with an opacity attribute it makes the transparency of the background not the picture if that makes sense

and if i add your bit of code it just doesn’t do anything when i hover over

It wont even let me remove the colored background, ive tried using Background: transparent; and background: none; as well as removing it all together but it still brings up a background

[Paulie_D]

You can ignore all the previous stuff I said about pseudo elements etc. as I thought you were talking about something else not related to the front page.

Line 775 has the background color….it’s set to orange at the moment. If you want it to be slightly transparent you **can’t** use opacity there are it will affect everything in the [a] link including the text.

You will only have to change the background color to something like

background: rgba(255,165,0,0.5)

where the 0.5 number is the amount of opacity you want on that color.

That’s the only thing you need to change.

[bLAZYY]

Hi Paulie thanks for the reply, i added it to the line but whats happening is the same as previously explained it doesn’t make the colour transparent so that you can see the picture behind it but instead it shows the white background of the container/body behind the picture

[Author]

Posts