How to implement the box-shadow in different material sections when hovering the mouse
Topics related to Realistic theme goes here.

shibaa987

VIP Member Rank
Posts: 20
Joined: Mon Jul 18, 2016 11:36 am
Display Name: shibaa987

How to implement the box-shadow in different material sections when hovering the mouse

linkPost by shibaa987 » Thu Aug 11, 2016 5:14 am

Hello Asmi,

When I hover the mouse on any part of this forum topics, replies or any section it looks in 3D and it seems it has come out a little bit above the other sections. That's just amazing :mrgreen: .

I don't know if the above sentence makes any sense to you :?: and hence :idea: I have captured a screenshot to explain the same:
mouse-hover.png
mouse-hover.png (52.83 KiB) Viewed 2443 times
Can we do that on the realistic theme?
User avatar
Asmi Khalil

Site Admin Rank
Posts: 781
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: How to implement the box-shadow in different material sections when hovering the mouse

linkPost by admin » Sat Aug 13, 2016 11:03 pm

Hi again shibaa987, yeah that's pretty easy to implement using only CSS :D You only need to add the below code to Custom CSS textarea ( Located in Appearance => Customize => Design & Layout ):
.content-area .post-box:hover, .sidebar-widget:hover {
	position: relative;
	z-index: 99;
	-webkit-box-shadow: 0 3px 25px 0 rgba(0,0,0,0.2);
	-moz-box-shadow: 0 3px 25px 0 rgba(0,0,0,0.2);
	box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.2);
	transition: .3s;
}
The z-index property will tell the browser which element should come before the other. In other words, it's responsible for elements arrangement according to the Z-axe. In order for the z-index to work, the position property must be specified (explicitly).
The box-shadow property is responsible for the shadow effects.
The transition property is responsible for animation delay.
And finaly, :hover selector tells the browser to apply those rules only when the user mouse-over on the selected element.
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
shibaa987

VIP Member Rank
Posts: 20
Joined: Mon Jul 18, 2016 11:36 am
Display Name: shibaa987

Re: How to implement the box-shadow in different material sections when hovering the mouse

linkPost by shibaa987 » Thu Aug 18, 2016 9:33 am

Many many thanks Asmi :mrgreen: .
I will ask your time when I explore something interesting :D .
User avatar
Asmi Khalil

Site Admin Rank
Posts: 781
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: How to implement the box-shadow in different material sections when hovering the mouse

linkPost by admin » Thu Aug 18, 2016 9:51 am

Most welcome :D
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943

Who is online

Users browsing this forum: No registered users and 1 guest

It is currently Fri Aug 23, 2019 8:15 pm