CSS image/content hovers

Developer
Patrick Cox
Size
2,765 Kb
Views
24,288
  1. CSS image/content hovers Previews
  2. CSS image/content hovers HTML Codes
  3. CSS image/content hovers CSS Codes
  4. CSS image/content hovers JS Codes

How do I make an css image/content hovers?

Working on a project and I wanted to use just css on the hover states to "switch" out some content instead of jquery toggles and stuff. Could probably do it with pseudos too.. What is a css image/content hovers? How do you make a css image/content hovers? This script and codes were developed by Patrick Cox on 04 September 2022, Sunday.

CSS image/content hovers Previews
IQ Test

CSS image/content hovers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS image/content hovers</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /**, *:before, *:after{box-sizing: border-box;}*/
html{ box-shadow: inset 0 0 200px rgba(0,0,0,0.3); height: 100%;
}
body{ font-family: 'helvetica', arial, sans-serif; margin: 0 auto; padding-top: 6%; width: 890px;
}
.box{ background: #ddd; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,0.5), inset 0 0 100px rgba(0,0,0,0.4); float: left; height: 200px; margin: 10px; position: relative; width: 200px; transition: background 0.3s ease-out;
}
.box p{ color: #eee; font-size: 34px; line-height: 34px; padding: 12px; opacity: 0; text-align: center; text-shadow: 0 -2px 1px rgba(0,0,0,0.25), 0 2px 0 #fff; position: absolute; top: 0;
}
.box img{ height: 200px; width: 200px; opacity: 1; display: block; transition: opacity 0.3s ease-in-out;
}
.box:hover img{ opacity: 0;
}
/* box colors */
.box:hover p{ opacity: 1; transition: opacity 0.5s ease-in-out;
}
.box:nth-child(1):hover{ background: #bd8cbf;
}
.box:nth-child(2):hover{ background: #f68e56;
}
.box:nth-child(3):hover{ background: #7cc576;
}
.box:nth-child(4):hover{ background: #448ccb;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="box"> <img src="https://goo.gl/i7XHY"/> <p>text on hover for box 1</p>
</section>
<section class="box"> <img src="https://goo.gl/zixZ0"/> <p>text on hover for box 2</p>
</section>
<section class="box"> <img src="https://goo.gl/fDNr9"/> <p>text on hover for box 3</p>
</section>
<section class="box"> <img src="https://goo.gl/uUqoH"/> <p>text on hover for box 4</p>
</section> <script src="js/index.js"></script>
</body>
</html>

CSS image/content hovers - Script Codes CSS Codes

/**, *:before, *:after{box-sizing: border-box;}*/
html{ box-shadow: inset 0 0 200px rgba(0,0,0,0.3); height: 100%;
}
body{ font-family: 'helvetica', arial, sans-serif; margin: 0 auto; padding-top: 6%; width: 890px;
}
.box{ background: #ddd; border: 2px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,0.5), inset 0 0 100px rgba(0,0,0,0.4); float: left; height: 200px; margin: 10px; position: relative; width: 200px; transition: background 0.3s ease-out;
}
.box p{ color: #eee; font-size: 34px; line-height: 34px; padding: 12px; opacity: 0; text-align: center; text-shadow: 0 -2px 1px rgba(0,0,0,0.25), 0 2px 0 #fff; position: absolute; top: 0;
}
.box img{ height: 200px; width: 200px; opacity: 1; display: block; transition: opacity 0.3s ease-in-out;
}
.box:hover img{ opacity: 0;
}
/* box colors */
.box:hover p{ opacity: 1; transition: opacity 0.5s ease-in-out;
}
.box:nth-child(1):hover{ background: #bd8cbf;
}
.box:nth-child(2):hover{ background: #f68e56;
}
.box:nth-child(3):hover{ background: #7cc576;
}
.box:nth-child(4):hover{ background: #448ccb;
}

CSS image/content hovers - Script Codes JS Codes

// images from http://theskateboardmag.com
CSS image/content hovers - Script Codes
CSS image/content hovers - Script Codes
Home Page Home
Developer Patrick Cox
Username pcridesagain
Uploaded September 04, 2022
Rating 4
Size 2,765 Kb
Views 24,288
Do you need developer help for CSS image/content hovers?

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!

Patrick Cox (pcridesagain) Script Codes
Name
IOS web app bookmark reminder bubble
Sexy Version - iOS web app bookmark reminder bubble
A Pen by Patrick Cox
Single Element Pure CSS US Flag
A Pen by Patrick Cox
CSS Q-Bert
Vans Logo, single element, no fonts, no psuedos
Responsive Content Experiment
A Better Moustache
Create amazing web content 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!