- This topic is empty.
March 18, 2013 at 8:13 am #43460
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 RegardsMarch 18, 2013 at 8:25 am #128604
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/uEnBmMarch 18, 2013 at 8:32 am #128607
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 regardsMarch 18, 2013 at 8:40 am #128608
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…
I’ve added a couple of comments as well.March 18, 2013 at 8:51 am #128611
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 :)
that’s the link to the website if ur interested
Thanks again Paulie appreciate itMarch 18, 2013 at 10:05 am #128625
Paulie in codepen the output is showing the box below the image not on top of it any idea why that’s happening?March 18, 2013 at 10:10 am #128626
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 belowMarch 18, 2013 at 10:22 am #128627
>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.March 18, 2013 at 10:32 am #128629
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
Now i need to try get it to work without the dark orange there but the writing still thereMarch 18, 2013 at 11:20 am #128634
Damn it cant work it out, wordpress makes it 2 hard 2 work with :( tried everything no luck
thanks anyways PaulieMarch 18, 2013 at 11:34 am #128637
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.March 18, 2013 at 12:49 pm #128651
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 backgroundMarch 18, 2013 at 1:10 pm #128658
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
where the 0.5 number is the amount of opacity you want on that color.
That’s the only thing you need to change.March 19, 2013 at 7:12 pm #128865
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 pictureAuthorPostsViewing 14 posts - 1 through 14 (of 14 total)
- The forum ‘CSS’ is closed to new topics and replies.