Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 5, 2016 at 8:13 pm #627968
    Sigmund

    Hi to the great Kriesi team,
    I have implemented the code from
    https://kriesi.at/support/topic/masonry-portfolio-hover-colour-and-centre-title/
    for showing a hover effect on a masonry portfolio image. With this is shows the title from the portfolio entry. Is it possible to show the excerpt (under the title) when hovering also?

    Thanks and Regards

    May 9, 2016 at 1:13 pm #629174
    Vinay

    Hey Sigmund,

    Sorry for the delay, Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Vinay

    May 9, 2016 at 4:42 pm #629345
    Sigmund

    Hi Vinay,
    you can see it at http://rocklobsterweb.de/kundenserver-5/projekte/ with the credentials I have posted. The Hover over the portfolio images should not only show the title but the excerpt also. In the “portfolio raster” the “Textauszug und Titel” is activated.

    Best Regards
    Sigmund

    May 11, 2016 at 8:24 am #630514
    Ismael

    Hi,

    Add this in the functions.php file:

    // grid hover
function add_custom_script_mod(){
?>
<script>
(function($){
	function a() {
		$('.grid-entry').each(function() {
			var excerpt = $(this).find('.grid-entry-excerpt').text();
			$(this).find('.grid-image').attr('data-excerpt', excerpt);
		});
	}

	a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script_mod');

    And the following code in the Quick CSS field:

    .grid-image:after {
    content: attr(data-excerpt);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
    text-align: center;
    opacity: 0;
    font-weight: 400;
    font-size: 18px;
    color: #6c8d6c!important;
    top: 0;
    left: 0%;
}

.grid-image:after {
    opacity: 0.9;
}

    Adjust the css properties value if needed.

    Best regards,
    Ismael

    May 11, 2016 at 8:31 pm #630943
    Sigmund

    Hi Ismael,
    it almost works. ;-), the excerpt shows up now, but all the time. I have tried some coding, but it did not work out. Can you do it that the excerpt is only showing on mouse over like the title?

    Regards
    Sigmund

    May 13, 2016 at 8:19 am #631897
    Ismael

    Hi,

    Replace this code:

    .grid-image:after {
    opacity: 0.9;
}

    .. with:

    .grid-entry:hover .grid-image:after {
    opacity: 0.9;
}

    Best regards,
    Ismael

    May 13, 2016 at 10:02 am #631950
    Sigmund

    Works like charm! Thank you, your support is always great!
    Regards
    Sigmund

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Masonry Portfolio Hover title and excerpt’ is closed to new replies.