CSS - Altering Hover Effect
MaulinM
Registered Users Posts: 7 Big grins
Hi all,
Thank you to everyone who continues to post edits and "hacks" to help make customization easy. It was a tremendous help for me when transitioning my site, and I definitely couldn't have done it as easily as I did without all the guidance posted on dgrin.
I was wondering if someone could help me with an issue I've encountered.
On my site - www.maulinmehta.com - I have two gallery links ("faces" and "places"). I have created a hover effect that changes the opacity from .75 to 1.0 when you hover over an image. I would like to change this so that the opacity is always 1.0, but that a drop shadow appears when you hover.
I attempted to use the code from smugocity but it didn't work:
The current code is:
Any thoughts on what I can do to make this work?
Thank you to everyone who continues to post edits and "hacks" to help make customization easy. It was a tremendous help for me when transitioning my site, and I definitely couldn't have done it as easily as I did without all the guidance posted on dgrin.
I was wondering if someone could help me with an issue I've encountered.
On my site - www.maulinmehta.com - I have two gallery links ("faces" and "places"). I have created a hover effect that changes the opacity from .75 to 1.0 when you hover over an image. I would like to change this so that the opacity is always 1.0, but that a drop shadow appears when you hover.
I attempted to use the code from smugocity but it didn't work:
.sm-gallery-thumbnail .sm-tile { margin: 0 0 32px 32px; box-shadow: 7px 7px 5px #888; }
The current code is:
.sm-image { opacity: .75; } a:hover .sm-image { opacity: 1.0; }
Any thoughts on what I can do to make this work?
0
Comments
Try this, which applies to ALL images, including the main image in SmugMug Layout:
If you want it to only apply to folder and gallery images then restrict it slightly (this is prob. what you want to use)
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Worked like a charm! Do you know if there's a way to restrict the shadow on mobile devices only? When I look at my site on my phone, the slideshow shadow gets cut off. If my only option is to use a smaller shadow I'm fine with that.
Thanks again for your help!
Yes, I describe how to restrict CSS code to certain sized screens here: http://www.aaronmphotography.com/Customizations/Sitewide/Screen-Width-Customizations
You can prob. do it by wrapping the min-width identifier as follows:
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
I used images as links to other pages, so to emhasize that, I would like to add some effect whenever mouse hovers ovet it...
See http://www.thefairygodmotherproject.co.uk/
and a way to exclude some images even it has a link - e.g. logo...
Thanks a lot in advance!
If it is "handwritten" you could define two different classes for your links in your HTML by this for example And then in your css you use it like this:
the "." indicates a class and in these two cases the class is used on an a-tag. If you wanted to use the same effects on other tags, say p and h2 you would have to obmit the "a" prior to the "." and specify the css for the entire class and not only for the class used on the specific tag.
I hope this helps you.
Lille Ulven
I use smugmug design tool for my page and unfortunately I do not speak Code. I have some ready made codes I have copied to the CSS section.
For the hover efect I used the following code:
How can I alter this code to make an effect only to the images with a link...
.sm-tile .sm-tile-content:hover {
How do I define to have no effects to the logo?
I asume this is the logo code from "inspect elements"
<img itemprop="image" src="http://www.thefairygodmotherproject.co.uk/photos/i-zSr2dtC/0/L/i-zSr2dtC-L.jpg" id="sm-tile-image-yui_3_8_0_1_1431967725784_3569" class="sm-image" data-clientid="sm-image-model_162" alt="a Webpage element factory" title="">
Thank you in advance for amazing help!
Don't worry we'll get it to work.
For your css to only work on chosen html-tags (a for links, p for "normal" text ...) you would define a class that you then attach to the html-tags as well as the css.
For what I can see from your site you have three different types of images:
1) "pure images without links" which you do not want to be affected by any of that css (if I get you right)
2) "images with links that are logos" which also should not get affected by this
3) "images with links that are not logos" which should get some extra formatting.
So what you need is to define one class and add it to every image (rather the sourrounding a-tag) that you want to have some extra formatting.
Let me find an example from your page... This code you would change to this:
Here I added into the a-tag's class one more class named fgm_specialformat. This class you would have to add to every a-tag surrounding an image that you want to have "special formatted" (you could give it a different name if you want though).
Then you would have to change your css from this:
to this:
This way - at least in theory - only images that belong not only to the classes .sm-image / .sm-tile-content but also to .fgm_specialformat will be affected by that particular css-block.
And hey... you found the design tool... I just bought a book about HTML and CSS to learn the coding. Both ways are legitimate ways to do your own site, yours might just be the easier way of getting there ;-)
Good luck
Lille Ulven
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
That's why I came up with that new class... turn it on by adding it to your a-tag and turn it off by not adding it - at least in theory.
Best regards
Lille Ulven
We can target certain sections of code, which should do the trick, but yes, you are correct.
Former SmugMug Product Team
aaron AT aaronmphotography DOT com
Website: http://www.aaronmphotography.com
My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations