Archived Forums

Resolved Image hover effect category blog

Issue

Kidzy
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

more than a month ago
Kidzy
# 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.

more than a month ago
Kidzy
# 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

more than a month ago
Kidzy
# 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;

}

more than a month ago
Kidzy
# 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.