> 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-image3.md).

# Custom-image3

### custom - image3

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

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FWrptFRNc1j1XSY4Rplfr%2Fcustom_image3.png?alt=media\&token=d26dd228-c543-424f-bbab-44ae4bc3a179)

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:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2FShbCLxNWgOVN8ZDeTCqn%2FUnite_Revolution_Slider2_step1.png?alt=media\&token=4ffd1eb7-44b9-4859-b1c9-8c69da7157c6)

#### Step-2:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2F0K1SDtHKLuvGTUbJFnCF%2Fsocial_share_step2.png?alt=media\&token=5bad5c42-f035-4014-82aa-425b3226d528)

#### Step-3:

![](https://299314993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrD6zkkWwg4W3S7sFogkq%2Fuploads%2Fw655ztQZmGlXAiwakUYO%2Fcustom_image3_step1.png?alt=media\&token=863a4c36-eac1-45d2-adb3-daa1a1a7e7da)

#### Step-4:

Add the following code in your custom module

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