Reply To: Masonry Layout
Hello Moira,
First sorry, at really the code I sent for your in my last reply was missing a " in the alt tag. The correct is alt="". Here’s the entire code fixed:
<div class="masonry-loader masonry-loader-showing">
<div class="masonry" data-plugin-masonry data-plugin-options="{'itemSelector': '.masonry-item'}">
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/square/blog-11.jpg" alt="" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/medium/blog-2.jpg" alt="" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/square/blog-4.jpg" alt="" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/medium/blog-9.jpg" alt="" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/medium/blog-38.jpg" alt="" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/medium/blog-24.jpg" alt="" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/medium/blog-34.jpg" alt="" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
<div class="masonry-item no-default-style col-lg-3 px-3 pb-2 mb-4">
<a href="portfolio-single-wide-slider.html">
<span class="thumb-info thumb-info-centered-info thumb-info-no-borders">
<span class="thumb-info-wrapper">
<img src="img/blog/medium/blog-42.jpg" alt="" />
<span class="thumb-info-title">
<span class="thumb-info-inner">Project Title</span>
<span class="thumb-info-type">Project Type</span>
</span>
<span class="thumb-info-action">
<span class="thumb-info-action-icon"><i class="fas fa-plus"></i></span>
</span>
</span>
</span>
</a>
</div>
</div>
</div>
This is the expected design/style when hover the image:
Sorry again!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with EZY HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads