Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Adding color overlay on basic Images

Adding color overlay on basic Images

Scheduled Pinned Locked Moved General Discussion
10 Posts 4 Posters 309 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • P Offline
    P Offline
    Primetime
    wrote on last edited by
    #1

    Hi! Thanks in advance to anybody willing to help.
    I'm currently working on my own portfolio using this theme is there a way to add a color overlay to basic images (not project thumbnail)?
    I'm a bit of a css noob so here it goes, I've been able to add a caption inside the image and would love to add an overlay too.
    I've tried using syntax for the hover but atm nothing works.

    .img img{
    transition: all 300ms ease;
    
    }
    
    .img:hover img{
    filter: brightness(0.5);
    }
    
    .img .caption{
        opacity: 0;
        transition: opacity 300ms ease;
    }
    
    .img:hover .caption{
        opacity: 1;
    }
    
    .img .caption{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    1 Reply Last reply
    0
    • RichardR Offline
      RichardR Offline
      Richard
      Global Moderator
      wrote on last edited by
      #2

      Dear @Primetime

      Cool!
      Could you please post a link to the website in question just to work better and see what happening with the code :)

      best
      Richard

      1 Reply Last reply
      0
      • P Offline
        P Offline
        Primetime
        wrote on last edited by Primetime
        #3

        Sure: https://www.creativetothebone.com/category/about *effect added to first image

        I'm still building and blocking stuff out, anyway as now the hover is guided by the filter command, I'd love to scrap that and add a color overlay on hover. I've tried different methods, but somehow images have either a class/property that can't be called in (or i'm just too noob to find it) or overwritten in .css.
        Usually I'll put a div on top of the image with the overlay and play with absolute and relative properties on it as I've seen doing on many tutorials, but even if I declare a div in the custom html I don't know what element to use in the gridder to attach the class too.
        Is there a better solution to this?
        Any help?

        Thanks @Richard-K

        1 Reply Last reply
        0
        • RichardR Offline
          RichardR Offline
          Richard
          Global Moderator
          wrote on last edited by
          #4

          Dear @Primetime

          Sorry that i may still need some understanding -
          Just first when you refer to having difficulty knowing which element to target with CSS - we can use the Developer tools within Chrome, Opera, Safari to inspect the HTML Structure of the webpage along with all the attributes:

          https://laytheme.com/documentation.html#custom-css-styling

          https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

          Here i have right-clicked and chosen "inspect" sorry if i am assuming anything, i just had to start from there :) :
          Screen Shot 2021-01-18 at 10.25.53 PM.png

          With an Image inserted - Lay Theme already has this class "ph" built in which can be used for Overlay - This is what gets activated in Customizer when choosing what hover does with Project Thumbnails, you could address this 'ph' if you wished to use as a color overlay block for your images

          Let me know your thoughts and best wishes!
          Richard

          1 Reply Last reply
          0
          • R Offline
            R Offline
            RenataMGr
            wrote on last edited by
            #5

            Hello, I have the same issue. I want to have this effect on all my images in my gridder. I have tried multiple ways of giving my images their own class and id to achieve the effect and customizing their html css so far without success. How would you code this in the custom css? Thank you for the great theme!

            1 Reply Last reply
            1
            • R Offline
              R Offline
              RenataMGr
              wrote on last edited by
              #6

              An example of the effect i need on images https://designdesign.com.au/

              1 Reply Last reply
              0
              • arminunruhA Offline
                arminunruhA Offline
                arminunruh
                Global Moderator
                wrote on last edited by
                #7

                this effect only works on project thumbnails
                they are added in the gridder with +project thumbnail
                or +more -> +thumbnail grid

                in customize -> project thumbnails

                you can find settings to make it work like here https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade

                1 Reply Last reply
                0
                • R Offline
                  R Offline
                  RenataMGr
                  wrote on last edited by
                  #8

                  Hi yes i tried with w3schools tutorial without success. the overlay effect affected the entire container of the image and not just the image itself. Maybe im targeting the images class incorrectly?

                  1 Reply Last reply
                  0
                  • arminunruhA Offline
                    arminunruhA Offline
                    arminunruh
                    Global Moderator
                    wrote on last edited by
                    #9

                    do you have a link?

                    1 Reply Last reply
                    0
                    • arminunruhA Offline
                      arminunruhA Offline
                      arminunruh
                      Global Moderator
                      wrote on last edited by
                      #10

                      so i mean, with images, you can't really have a text on top of them when you hover over an image :⁄ so im not sure if what u want is even possible :O

                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      I also code custom websites or custom Lay features.
                      šŸ’æ Email me here: šŸ’æ
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      A
                      alasdair17
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                      laytheme.com
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Search