Faux 3d hover blocks in CSS

Developer
Wafs
Size
1,894 Kb
Views
24,288
  1. Faux 3d hover blocks in CSS Previews
  2. Faux 3d hover blocks in CSS HTML Codes
  3. Faux 3d hover blocks in CSS CSS Codes

How do I make an faux 3d hover blocks in css?

Mousing over the items just resizes the width of the boxes they're in, including the :after box. Also, I've animated the text-shadow propery, moving and bluring it on hover to give it more of a 3d sense. What is a faux 3d hover blocks in css? How do you make a faux 3d hover blocks in css? This script and codes were developed by Wafs on 12 September 2022, Monday.

Faux 3d hover blocks in CSS Previews
IQ Test

Faux 3d hover blocks in CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Faux 3d hover blocks in CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <div id="box1" class="box"><span>one</span></div> <div id="box1" class="box"><span>two</span></div> <div id="box1" class="box"><span>three</span></div> <div id="box1" class="box"><span>four</span></div>
</div>
</body>
</html>

Faux 3d hover blocks in CSS - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,900,300);
*
{ -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}
#wrapper
{
position: absolute; left:5%; top:40px;
}
.box
{ width: 200px; height: 50px; background: red;
}
.box:before
{ content:""; position: absolute; width: 50px; height: 50px; background-color: rgba(0,0,0,.2); -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}
div span
{ position: relative; top:5px; left: 110px; font-family:Roboto, sans-serif; font-size: 1.2em; font-weight:400; text-transform:uppercase; color:white; text-shadow: 0px 0px 0px #000, -3px 2px 2px #000;
}
.box:hover
{ width: 150px; background: #D00;
}
.box:hover > span
{ text-shadow: 0px 0px 2px #000,-60px 4px 9px #000; left: 100px;
}
.box:hover:before
{ width:10px;
}
Faux 3d hover blocks in CSS - Script Codes
Faux 3d hover blocks in CSS - Script Codes
Home Page Home
Developer Wafs
Username wafs
Uploaded September 12, 2022
Rating 3
Size 1,894 Kb
Views 24,288
Do you need developer help for Faux 3d hover blocks in CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Wafs (wafs) Script Codes
Name
A Pen by wafs
Website sidebar menu with animation
Barbara Walters
Title follows mouseover menu
Jquery Dynamic background-colours
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!