> For the complete documentation index, see [llms.txt](https://jdocs.themeparrot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jdocs.themeparrot.com/joomla-templates/bookstore/layout-customization/home-styles/home-style-1/custom-image1.md).

# Custom-image1

custom - image1

> Module position: Position-1
>
> Module class suffix: custom-img

![](/files/szyEYNIxV7czeR3W5CBT)

If you want to display your image like this you have to create a custom module and publish the custom module like below

Step-1:

![](/files/6hrr0hNnQSFGHfWLA3V3)

Step-2:

![](/files/G7CaC8N2b47H5SyFTA48)

#### Step-3:

![](/files/1g559jcav1BUl0nOWLu2)

#### Step-4:

Add the following code in your custom module

```html
<div class="custom-image"><img src="images/themeparrot/slideshow/read1.jpg" alt="read1" />
<div class="overlay">
<h2>Book Collection</h2>
<p><a href="#"> <em class="fa fa-plus-square"></em> </a></p>
</div>
</div>
```