CSS - Altering Hover Effect

MaulinMMaulinM Registered Users Posts: 7 Big grins
edited May 19, 2015 in SmugMug Customization
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:
.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?

Comments

  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 15, 2013
    MaulinM wrote: »
    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:

    Any thoughts on what I can do to make this work?

    Try this, which applies to ALL images, including the main image in SmugMug Layout:
    .sm-image {  
      opacity: 1.0;
    }
    
    .sm-tile .sm-tile-content:hover {
      box-shadow: 7px 7px 5px #888;
    }
    

    If you want it to only apply to folder and gallery images then restrict it slightly (this is prob. what you want to use)
    .sm-tiles-list .sm-tile .sm-tile-content:hover {
       box-shadow: 7px 7px 5px #888;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • MaulinMMaulinM Registered Users Posts: 7 Big grins
    edited October 16, 2013
    leftquark wrote: »
    Try this, which applies to ALL images, including the main image in SmugMug Layout:
    .sm-image {  
      opacity: 1.0;
    }
    
    .sm-tile .sm-tile-content:hover {
      box-shadow: 7px 7px 5px #888;
    }
    

    If you want it to only apply to folder and gallery images then restrict it slightly (this is prob. what you want to use)
    .sm-tiles-list .sm-tile .sm-tile-content:hover {
       box-shadow: 7px 7px 5px #888;
    }
    

    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!
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 16, 2013
    MaulinM wrote: »
    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:
    /* Only add the shadow box for screens that are large enough (i.e. not smartphones) */
    @media only screen and (min-width: 641px) {
       .sm-tiles-list .sm-tile .sm-tile-content:hover {
          box-shadow: 7px 7px 5px #888;
       }
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited October 30, 2013
    In SmugMug layout it was a bit trickier for the thumbnails only:
    /* Add a drop-shadow to the thumbnails in SmugMug Layout */
    .sm-gallery-tilesnav .sm-tile .sm-tile-content .sm-tile-overlay {
      box-shadow: 7px 7px 5px #888;
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • FairyGodmotherFairyGodmother Registered Users Posts: 7 Beginner grinner
    edited May 18, 2015
    Is there a way to limit the css code of drop shadow only to the single images with an url link?
    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!
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited May 18, 2015
    I am not sure as of how far your html-code is "handwritten" or from a smug mug-template (looks pretty handwritten to me).
    If it is "handwritten" you could define two different classes for your links in your HTML by this for example
    <a href="link1" class="img_with_hover_effect"><img/></a>
    <a href="link2" class="img_without_hover_effect"><img/></a>
    
    And then in your css you use it like this:
    a.img_with_hover_effect:hover {
    /* css that has to be used when hovering over a photo with a link*/
    }
    a.img_without_hover_effect:hover{
    /* css that has to be used when hovering over a photo that should not have special effects (or different ones) like logos - if absolutely no effect is needed this could be left out and the class="mg_without_hover_effect in the a-tag omitted */
    }
    

    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
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • FairyGodmotherFairyGodmother Registered Users Posts: 7 Beginner grinner
    edited May 18, 2015
    Thank you so much, Lille Ulven!
    I am not sure as of how far your html-code is "handwritten" or from a smug mug-template (looks pretty handwritten to me).
    If it is "handwritten" you could define two different classes for your links in your HTML by this for example

    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:
    .sm-image {  
      opacity: 1.0;
    }
    
    .sm-tile .sm-tile-content:hover {
      box-shadow: 2px 3px 5px rgba(0,0,0,0.2);
      opacity: 0.9;
      -webkit-transition: all 0.5s ease-in;
      -moz-transition: all 0.5s ease-in;
      transition: all 0.5s ease-in;
    }
    

    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&quot; 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!
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited May 18, 2015
    Hi again, FairyGodmother.

    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...
    <a itemprop="url" href="http://www.thefairygodmotherproject.co.uk/Wedding-photography" class="sm-tile-content" data-clientid="sm-image-model_4"><img itemprop="image" src="http://www.thefairygodmotherproject.co.uk/photos/i-4RVkSzQ/0/L/i-4RVkSzQ-L.jpg" id="sm-tile-image-yui_3_8_0_1_1431971096476_208" class="sm-image sm-tile-portrait" data-clientid="sm-image-model_4" alt="Corporate WEB" title=""></a>
    
    This code you would change to this:
    <a itemprop="url" href="http://www.thefairygodmotherproject.co.uk/Wedding-photography" class="sm-tile-content fgm_specialformat" data-clientid="sm-image-model_4"><img itemprop="image" src="http://www.thefairygodmotherproject.co.uk/photos/i-4RVkSzQ/0/L/i-4RVkSzQ-L.jpg" id="sm-tile-image-yui_3_8_0_1_1431971096476_208" class="sm-image sm-tile-portrait" data-clientid="sm-image-model_4" alt="Corporate WEB" title=""></a>
    

    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:
    .sm-image {  
      opacity: 1.0;
    }
    
    .sm-tile .sm-tile-content:hover {
      box-shadow: 2px 3px 5px rgba(0,0,0,0.2);
      opacity: 0.9;
      -webkit-transition: all 0.5s ease-in;
      -moz-transition: all 0.5s ease-in;
      transition: all 0.5s ease-in;
    }
    

    to this:
    .sm-image.fgm_specialformat {  
      opacity: 1.0;
    }
    
    .sm-tile .sm-tile-content.fgm_specialformat:hover {
      box-shadow: 2px 3px 5px rgba(0,0,0,0.2);
      opacity: 0.9;
      -webkit-transition: all 0.5s ease-in;
      -moz-transition: all 0.5s ease-in;
      transition: all 0.5s ease-in;
    }
    

    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
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited May 18, 2015
    You can call out images that are links specifically using:
    .sm-tile a img {
      /* YOUR CSS HERE */
    }
    
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • Lille UlvenLille Ulven Registered Users Posts: 567 Major grins
    edited May 19, 2015
    leftquark your code will only work if you want some special code for all images that are links - unfortunately (at least that is how I understand FairyGodmother) what is needed is something that can be turned off for some images that are links (logos for example), turned on for others and won't be used at all for images that are no links.
    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
    https://www.lilleulven.smugmug.com - The Photos of my travels
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited May 19, 2015
    leftquark your code will only work if you want some special code for all images that are links - unfortunately (at least that is how I understand FairyGodmother) what is needed is something that can be turned off for some images that are links (logos for example), turned on for others and won't be used at all for images that are no links.
    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

    thumb.gif

    We can target certain sections of code, which should do the trick, but yes, you are correct.
    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
Sign In or Register to comment.