Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1173064

    hi there,
    like what has been done for the portfolio grid – I’d like to create the same effect for blog posts (if possible).
    portfolio grid with text overlay
    i'd like to do the same for blog posts
    instead of displaying the title under the featured/thumbnail image, i’d like it to display it on hover, overlaid on top of the thumbnail image.
    any advice of which files to look for/edit?
    many thanks,
    Jason

    #1173860

    Hey Jason,

    Thank you for the inquiry.

    You can set the slide or post content to display only when the article is hovered. Try this code in the Quick CSS field.

    .slide-content {
    	position: absolute;
    	width: 100%;
    	height: 100%;
    	text-align: center;
    	top: 30%;
    	opacity: 0;
    	transition: all 0.3s;
    }
    
    .slide-entry:hover .slide-content {
        opacity: 1;
    }

    How did you set the overlay?

    Best regards,
    Ismael

    #1174710

    hi Ismael,
    almost…
    here are the styles i’ve used to get the overlay (i added a custom class – .thoughts)

    .thoughts span.image-overlay:hover {background:#1d2553;}
    .thoughts span.image-overlay-inside {display:none;}
    #top .thoughts h3 a {font-weight:normal;color:#ffffff;}

    if you hover over the image, only the top 30% triggers the background color, the bottom 70% triggers the title – but no background color change.
    also, is there any way to center the title vertically better?
    i works well with 2 lines, but not so great with just a single line. not a biggie, but i know the client will ask – so it’d be good to let them know it’s not simple to do so.
    thanks heaps,
    Jason

    • This reply was modified 5 months, 2 weeks ago by  Jason.
    • This reply was modified 5 months, 2 weeks ago by  Jason.
    #1174806

    Hi,

    Try to replace .thoughts with .slide-entry, and remove hover in the span.image-overlay so that both overlay and title will display when the article is hovered. Or try to add this css code.

    .slide-entry:hover .slide-image {
    	background: #1d2553;
    }
    
    .slide-entry:hover .slide-image img {
    	opacity: 0;
    }
    

    This will apply the background color to the slide image container instead of the overlay — creating the same effect.

    Best regards,
    Ismael

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.