You can display easily your images with a nicely hover effect. See the examples below.
In each example, I include the CSS class "effect-image-X" for the effect and the class "one-half" and "one-half last" to obtain 2 columns (see the page Column layout here).
Important : Be careful with the content inside each images. The images will be smaller in phone so you must write only few words. And if you display 2 images per lines (like on this page), it's more critical. You must resize your browser to look the result. The effect 3, 5 and 6 are more compliant.
Thank to Unplash for these beautiful images
Effect 01
Example of Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
View more
Example of Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. View more
<figure class="effect-image-1 one-half">
<img src="/template-joomla/template-116/images/YOUR-IMAGE.jpg" alt="" />
<figcaption>
<h3>Example of <span>Title</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-image-1 one-half last">
<img src="/template-joomla/template-116/images/YOUR-SECOND-IMAGE.jpg" alt="" />
<figcaption>
<h3>Example of <span>Title</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <a href="#">View more</a></p>
</figcaption>
</figure>
Effect 02
Example of Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
View more
Example of Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. View more
<figure class="effect-image-2 one-half">
<img src="/template-joomla/template-116/images/YOUR-IMAGE.jpg" alt="" />
<figcaption>
<h3>Example of <span>Title</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-image-2 one-half last">
<img src="/template-joomla/template-116/images/YOUR-SECOND-IMAGE.jpg" alt="" />
<figcaption>
<h3>Example of <span>Title</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <a href="#">View more</a></p>
</figcaption>
</figure>
Effect 03
Example of Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
View more
Example of Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. View more
<figure class="effect-image-3 one-half">
<img src="/template-joomla/template-116/images/YOUR-IMAGE.jpg" alt="" />
<figcaption>
<h3>Example of <span>Title</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-image-3 one-half last">
<img src="/template-joomla/template-116/images/YOUR-SECOND-IMAGE.jpg" alt="" />
<figcaption>
<h3>Example of <span>Title</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <a href="#">View more</a></p>
</figcaption>
</figure>
Effect 04
Example of Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
View more
Example of Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. View more
<figure class="effect-image-4 one-half">
<img src="/template-joomla/template-116/images/YOUR-IMAGE.jpg" alt="" />
<figcaption>
<h3>Example of <span>Title</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-image-4 one-half last">
<img src="/template-joomla/template-116/images/YOUR-SECOND-IMAGE.jpg" alt="" />
<figcaption>
<h3>Example of <span>Title</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <a href="#">View more</a></p>
</figcaption>
</figure>
Effect 05
Example of Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
View more
Example of Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. View more
<figure class="effect-image-5 one-half">
<img src="/template-joomla/template-116/images/YOUR-IMAGE.jpg" alt="" />
<figcaption>
<h3>Example of <span>Title</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-image-5 one-half last">
<img src="/template-joomla/template-116/images/YOUR-SECOND-IMAGE.jpg" alt="" />
<figcaption>
<h3>Example of <span>Title</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <a href="#">View more</a></p>
</figcaption>
</figure>
Effect 06
Example of Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
View more
Example of Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. View more
<figure class="effect-image-6 one-half">
<img src="/template-joomla/template-116/images/YOUR-IMAGE.jpg" alt="" />
<figcaption>
<h3>Example of <span>Title</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<a href="#">View more</a>
</figcaption>
</figure>
<figure class="effect-image-6 one-half last">
<img src="/template-joomla/template-116/images/YOUR-SECOND-IMAGE.jpg" alt="" />
<figcaption>
<h3>Example of <span>Title</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. <a href="#">View more</a></p>
</figcaption>
</figure>