Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • January 14, 2020 at 5:21 am #1173064
    Jason

    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

    January 15, 2020 at 9:49 am #1173860
    Ismael

    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

    January 15, 2020 at 11:44 pm #1174710
    Jason

    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 4 years, 10 months ago by Jason.
    January 16, 2020 at 9:56 am #1174806
    Ismael

    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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.