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
https://shkolarazum.ru/2020/index.php/ru/novosti
Accepted Answer
Hi,
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:
Extensions>Templates>Styles>
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.
https://prnt.sc/pu705g
https://prnt.sc/pu70zn
In Extensions>Template> Template Options > Custom Code > Custom CSS please add this
Thanks
  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;
}

1.jpg
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.