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.
veecagnino
Joomla! Fledgling
Joomla! Fledgling
Posts: 2
Joined: Sun Jan 21, 2018 5:49 am

Article intro images hover effect.

Postby veecagnino » Sun Jan 21, 2018 6:01 am

Hello,

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="http://schema.org/BlogPosting">

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


<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>
<dd class="createdby" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
Written by <span itemprop="name">Luca</span> </dd>
<dd class="hits">
<meta itemprop="interactionCount" content="UserPageVisits:119">
Hits: 119 </dd>
</dl>

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

<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>
</p>


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

</article>

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

Thank you!

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

Re: Article intro images hover effect.

Postby 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}


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

Who is online

Users browsing this forum: No registered users and 14 guests