Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Easy way to put captions in images

    General Discussion
    2
    6
    122
    Loading More Posts
    • 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.
    • H
      hx last edited by

      Hello everyone,

      I wonder if there's an easy way to put caption inside the actual image, make it appear as an overlay?

      I've arrived at this:

      .caption{
          transform: translateY(-100%);
          padding: 20px;
      	background: rgba(255, 255, 255, .8);
      	opacity: 0;
      	transition: all 1s ease;
      }
      
      .caption:hover {
      	opacity: 1;
      	transition: all 1s ease;
      }
      

      But it creates an unwanted (white) void at the bottom of the image (where the cation used to be) and also, the caption overlay does not fill the whole image.
      See here. (the website I am working on)

      Any clue how I could further work on this?
      Thanks!

      1 Reply Last reply Reply Quote 0
      • Richard
        Richard Global Moderator last edited by

        Dear @hx

        Wish to help, however the Link provided does not take me to the website to inspect it sorry :)

        Best
        Richard

        H 1 Reply Last reply Reply Quote 0
        • H
          hx last edited by

          Hello Richard,

          sorry, weird mistake. It just copied the anchor. This is the website:
          https://stilpunkt.mcelangelo.com/

          I managed to get the caption into the image and style it via this code:

          .img {
          	display:flex;
          	z-index:0;
          }
          
          .caption {
          	padding: 40px;
          	background: rgba(255, 255, 255, .8);
          	opacity: 0;
          	transition: all 1s ease;
          	z-index: 10;
          	overflow: hidden;
          	flex-grow:1;
          }
          
          .caption:hover {
          	opacity: 1;
          	transition: all 1s ease;
          }
          

          However, as soon as the text of the caption reaches the bounds of the image, it overflows, disregarding the overflow:hidden command. Did I forget something? I tried a several other commands (as described here: https://medium.com/@gaurav5430/css-flex-positioning-gotchas-child-expands-to-more-than-the-width-allowed-by-the-parent-799c37428dd6), but to no avail.

          Maybe you have an idea. Thank you very much!

          1 Reply Last reply Reply Quote 0
          • H
            hx @Richard last edited by

            @Richard-Keith Hey Richard, I wonder if you have seen this... but can you point me into the right direction regarding the alignment of the Caption text within the container?

            I'm trying to make it vertically centered as opposed to the top, which is now the case, but I still want the container to fit height and width to the parent (except the 20 px margin).

            Thank you!

            1 Reply Last reply Reply Quote 0
            • Richard
              Richard Global Moderator last edited by

              Dear @hx

              I apologise that i cant figure it out directly at the moment even though i would like to help :)

              I have found some content online that will definitely get you to your wanted destination! I hope this helps and i haven't let you down!

              https://www.w3schools.com/css/css_align.asp

              https://vanseodesign.com/css/vertical-centering/

              https://css-tricks.com/centering-css-complete-guide/

              https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

              https://www.w3docs.com/snippets/css/how-to-vertically-center-text-with-css.html

              https://blog.logrocket.com/13-ways-to-vertical-center/

              Once again good luck! Let me know how you go :)

              Sincerely
              Richard

              H 1 Reply Last reply Reply Quote 0
              • H
                hx @Richard last edited by

                Thank you @Richard-Keith, I'll give these a read - even though I already delved into some of them!

                xx

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post

                Try this to fix issues before you post:

                Use the Search Feature. Maybe there is already a solution to your issue.

                1. Update Lay Theme and all Lay Theme Addons
                2. Disable all Plugins
                3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                4. Now see if your problem solved itself
                5. Go here, see if your problem is listed here:
                Troubleshooting

                When you post:
                1. Post a link to where the problem is
                2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                Thanks!

                Online Users

                I
                L
                M
                G

                Recent Topics

                • text underline

                • open all links in a thumbnail grid in a new tab

                • lazy loading affects project thumbnail mouseover images

                laytheme.com