1. Kidzy
  2. Tuesday, 19 May 2020
Hello there
I wanted to make hover effect on intro image in category blog by using this css
.entry-image intro-image a img{ opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.entry-image intro-image a img:hover { opacity: .5; }
but it doesnt work. I'm sure my code doesn't work due to wrong linking the class of image to my code. Could you please look at my problem and find that mistake?
The site url
Accepted Answer
Use this custom css

.view-category article.item img:hover{
opacity:0.5 !important;

Add this css code inside the custom.css file.
Note: Path towards custom CSS:
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.
In Extensions>Template> Template Options > Custom Code > Custom CSS please add this
  1. more than a month ago
  2. Kidzy
  3. # Permalink
Responses (4)
Yes it works but how can I change that opacity color? When I add
.view-category article.item img:hover{
background: #4ca3dd;
opacity:0.5 !important;
And I tried
.view-category article.item img
.view-category article.
.item img
but it doesn't work.
  1. more than a month ago
  2. Kidzy
  3. # 1
Opacity has no color. Opacity - this is just the opacity.
You should set the background-color for the parent element, but not to the img tag and not on hover.

But among other things, the current layout does not allow this, because the parent element does not have any sizes. Therefore, it is necessary to first prepare
  1. more than a month ago
  2. Kidzy
  3. # 2
Like that.

.view-category article.item .intro-image a {
position: relative;
display: block;
height: 190px;
float: left;
margin-right: 40px;
background-color: #4ca3dd;
overflow: hidden;
z-index: 2;
.view-category article.item .entry-image img {
margin-right: 0;

Attachments (1)
  1. more than a month ago
  2. Kidzy
  3. # 3

There are no replies made for this post yet.
Be one of the first to reply to this post!

This forum is archived

This forum has been archived. Please use JoomShaper official support system.