Article intro images hover effect.

General questions relating to Joomla! 3.x. Please consider the availability of third-party templates and extensions when deciding which Joomla version to use.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Post Reply
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sun Jan 21, 2018 5:49 am

Article intro images hover effect.

Post by veecagnino » Sun Jan 21, 2018 6:01 am


I would like to simply apply a hover effect to any article intro images displayed in featured articles blog. I have the CSS code for the effect, but I have no idea how to add a class to the image HTML.

Inspecting the image with Chrome this is what I see:

<article class="leading-0" itemprop="blogPost" itemscope="" itemtype="">

<h2 itemprop="name">
<a href="/en/learn-more" itemprop="url">Description title</a>

<dl class="article-info">
<dt class="article-info-term">Details</dt>
<dd class="published">
<time datetime="2018-01-15T11:16:04+07:00" itemprop="datePublished">
Published: Monday, 15 January 2018 11:16 </time>
<dd class="createdby" itemprop="author" itemscope="" itemtype="">
Written by <span itemprop="name">Luca</span> </dd>
<dd class="hits">
<meta itemprop="interactionCount" content="UserPageVisits:119">
Hits: 119 </dd>

<div class="img-intro-none">
<img src="/images/cover.jpg alt="" >

<p>Let's learn what it is and how it works.</p>

<p class="readmore">
<a href="/en/learn-more" itemprop="url">
Read more ...</a>

<div class="item-separator"></div>


I have a very basic knowledge of PHP so I will possibly need a detailed answer.

Thank you!

User avatar
Joomla! Explorer
Joomla! Explorer
Posts: 342
Joined: Tue Jul 19, 2011 8:56 am
Location: Monaco

Re: Article intro images hover effect.

Post by Jeyjoo » Wed Feb 07, 2018 8:43 pm

You need to use a CSS selector that picks out the image. In your css override file you need a line like:

article .img-intro-none:hover{add your hover effect here}
Ultimate guide to setting up a Joomla MULTILANGUAGE website ... -joomla-3/
Guida siti MULTILINGUE in Joomla ... -joomla-3/

Post Reply

Return to “General Questions/New to Joomla! 3.x”