I cannot understand how, in my case, possible to properly positioned the menu by creating only one class menu, instead of menu_left and menu_right classes.
How can I optimize css here?
Here's code example:
html:
<div class="menu_left" >
<div class="menu__item">
<span class="menu__item__link__text">SHOP</span>
</div>
<div class="menu__item">
<span class="menu__item__link__text">ABOUT</span>
</div>
</div>
<a href="" class="logo">
<img src="assets/sds.jpgf" class="logo__image">
</a>
<div class ="menu_right">
<div class="menu__item">
<span class="menu__item__link__text">CART</span>
</div>
<div class="menu__item">
<span class="menu__item__link__text">EUR</span>
</div>
</div>
Menu Image
css
.menu_left {
background: rgba(0, 0, 0, 0.85);
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
float: left;
width: auto;
opacity: 1;
visibility: visible;
-webkit-transition: none;
-moz-transition: none;
transition: none; }
.menu_right{
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
float: right;
width: auto;
opacity: 1;
visibility: visible;
-webkit-transition: none;
-moz-transition: none;
transition: none; }
}
Try it with Flexbox
See flexbox menu here
HTML
<div class="menu">
<ul>
<li>
Lorem
</li>
<li>
Lorem
</li>
</ul>
<div class="img"> <!-- replace div with the <img src="" alt="" /> tag -->
img here
</div>
<ul>
<li>
Lorem
</li>
<li>
Lorem
</li>
</ul>
</div>
CSS
.menu {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 10px;
background: #ddd;
}
ul {
display: flex;
padding: 0;
list-style: none;
}
a {
padding: 5px 10px;
color: #000;
text-decoration: none;
text-transform: uppercase;
}
.img {
width: 200px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
color: #fff;
}
To optimize CSS when using very similar settings, use three classes instead of two: One common class for both elements which contains all the common settings, and two separate classes for the two elements which contain the different settings:
CSS:
.menu_all {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
width: auto;
opacity: 1;
visibility: visible;
-webkit-transition: none;
-moz-transition: none;
transition: none;
top: auto;
right: auto;
bottom: auto;
left: auto;
background: transparent;
}
.menu_left {
background: rgba(0, 0, 0, 0.85);
float: left;
}
.menu_right{
float: right;
}
and HTML:
<div class="menu_all menu_left" >
<div class="menu__item">
<span class="menu__item__link__text">SHOP</span>
</div>
<div class="menu__item">
<span class="menu__item__link__text">ABOUT</span>
</div>
</div>
<a href="" class="logo">
<img src="assets/sds.jpgf" class="logo__image">
</a>
<div class ="menu_all menu_right">
<div class="menu__item">
<span class="menu__item__link__text">CART</span>
</div>
<div class="menu__item">
<span class="menu__item__link__text">EUR</span>
</div>
</div>
I have this example:
.gg-slides {height: auto; overflow: hidden}
.gg-con {margin: 75px 0 80px; display: flex}
.gg-icon {background: rgba(0,0,0,.6); border-radius: 99px; color: #333;
cursor: pointer; height: 126px; left: 50%; position: absolute; text-align: center; top: 50%; transition: all .5s ease; width: 126px; z-index: 3;}
<div class="gg-slides">
<div class="gg-con">
<span class="gg-slide"><img src="http://placehold.it/200x200" alt=""></span>
<span class="gg-slide"><img src="http://placehold.it/200x200" alt="">
<div class="gg-icon">
<div class="gg-count">
<span class="gg-total">10</span>
</div>
</div>
</span>
<span class="gg-slide"><img src="http://placehold.it/200x200" alt=""></span>
</div>
</div>
Essentially I'd like for the .gg-icon to appear horizontally and vertically in the middle of the 2nd image for all screen resolutions. I'm having trouble figuring this out with my current HTML structure.
You can do it with the positioning:
.gg-slides {height: auto; overflow: hidden}
.gg-con {margin: 75px 0 80px; display: flex}
.gg-icon {
background: rgba(0,0,0,.6);
border-radius: 50%;
color: #333;
cursor: pointer;
height: 126px;
/*left: 50%;*/
/*position: absolute;*/
text-align: center;
/*top: 50%;*/
transition: all .5s ease;
width: 126px;
z-index: 3;
}
/* added */
.gg-slide {
position: relative;
}
.gg-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="gg-slides">
<div class="gg-con">
<span class="gg-slide"><img src="http://placehold.it/200x200" alt="">
</span>
<span class="gg-slide"><img src="http://placehold.it/200x200" alt="">
<div class="gg-icon">
<div class="gg-count">
<span class="gg-total">10</span>
</div>
</div>
</span>
<span class="gg-slide"><img src="http://placehold.it/200x200" alt=""></span>
</div>
</div>
Another way to reach this: https://jsfiddle.net/0yjwLras/43/
I just removed the central image and put there a new div, which has the central div under it, and background-image
<div class="gg-slides">
<div class="gg-con">
<span class="gg-slide"><img src="http://avatarbox.net/avatars/img28/kitten_eyes_avatar_picture_75535.jpg" /></span>
<span class="gg-slide"><div class="BUBU"><div class="gg-icon CENTRAL-BUBU"><div class="gg-count"><span class="gg-total">10</span></div></div></div></span>
<span class="gg-slide"><img src="http://avatarbox.net/avatars/img28/kitten_eyes_avatar_picture_75535.jpg" /></span>
</div>
</div>
CSS
.gg-slides {height: auto;overflow: hidden;}
.gg-con {margin:75px 0 80px;display:flex;}
.gg-icon {background-color: rgba(255,0,0,.6);border-radius: 50%;color: #333; cursor: pointer; width: 50px; height: 50px;text-align: center;transition: all .5s ease;z-index: 3;}
.BUBU {width: 100px; height: 100px; background-image: url('http://avatarbox.net/avatars/img28/kitten_eyes_avatar_picture_75535.jpg'); background-repeat: no-repeat; padding-top: 25px;}
.CENTRAL-BUBU {margin-left: auto; margin-right: auto;}
Currently I am trying to create some links that look like buttons. It's working fairly well, except I want to be able to align them horizontally. This what I have so far:
.border {
display: table;
width: 220px;
height: 120px;
border: 2px solid #1E5034;
transition: all 250ms ease-out;
box-sizing: border-box;
border-spacing: 10px;
float:left;
}
.border:hover {
border-spacing: 2px;
}
a.btn {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #ffffff;
font: 17.5px sans-serif;
text-decoration: none;
background-color: #1E5034;
line-height: 20px;
margin-bottom: 0;
}
a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited,
a.btn:link {
color: #ffffff;
background-color: #1E5034;
text-decoration: none;
cursor: pointer;
}
<div class="btn-grp">
<div class="border">
<a class="btn" href="#">Some really long text link #1</a>
</div>
<div class="border">
<a class="btn" href="#">Some other really long text link #2</a>
</div>
<div class="border">
<a class="btn" href="#">Some more really really long text link #3</a>
</div>
<div class="border">
<a class="btn" href="#">The last really long text link #4</a>
</div>
</div>
Edit:
If it has display:inline-block; it will mess up with formatting with heights and not center the text.
I'm trying to create something as shown here, but then be able to center this on the page as well.
Thanks!
Support in all browsers including IE.
.btn-grp {
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
width: 80vw;
}
.border {
display: table;
width: 25%;
height: 120px;
border: 2px solid #1E5034;
transition: all 250ms ease-out;
box-sizing: border-box;
border-spacing: 10px;
float: left;
}
.border:hover {
border-spacing: 2px;
}
a.btn {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #ffffff;
font: 17.5px sans-serif;
text-decoration: none;
background-color: #1E5034;
line-height: 20px;
margin-bottom: 0;
}
a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited,
a.btn:link {
color: #ffffff;
background-color: #1E5034;
text-decoration: none;
cursor: pointer;
}
<div class="btn-grp">
<div class="border">
<a class="btn" href="#">Some really long text link #1</a>
</div>
<div class="border">
<a class="btn" href="#">Some other really long text link #2</a>
</div>
<div class="border">
<a class="btn" href="#">Some more really really long text link #3</a>
</div>
<div class="border">
<a class="btn" href="#">The last really long text link #4</a>
</div>
</div>
If you need the 4 div at vertically centered then use:
.btn-grp {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
Because you are using width in px thats why then don't come in a single row...So try to use % width i.e. 25%...
.border {
display: table;
width: 25%;
height: 120px;
border: 2px solid #1E5034;
transition: all 250ms ease-out;
box-sizing: border-box;
border-spacing: 10px;
float: left;
}
.border:hover {
border-spacing: 2px;
}
a.btn {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #ffffff;
font: 17.5px sans-serif;
text-decoration: none;
background-color: #1E5034;
line-height: 20px;
margin-bottom: 0;
}
a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited,
a.btn:link {
color: #ffffff;
background-color: #1E5034;
text-decoration: none;
cursor: pointer;
}
<div class="btn-grp">
<div class="border">
<a class="btn" href="#">Some really long text link #1</a>
</div>
<div class="border">
<a class="btn" href="#">Some other really long text link #2</a>
</div>
<div class="border">
<a class="btn" href="#">Some more really really long text link #3</a>
</div>
<div class="border">
<a class="btn" href="#">The last really long text link #4</a>
</div>
</div>
Well I recommend you to use Flexbox here...It will give you the full control to align the item vertically and horizontally...Also you will need to use :after for the background, as flexbox does not allow border-spacing
.btn-grp {
display: flex;
justify-content: center;
}
.border {
width: 20%;
height: 120px;
border: 2px solid #1E5034;
transition: all 250ms ease-out;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 10px;
}
a.btn {
text-align: center;
color: #ffffff;
font: 16px sans-serif;
text-decoration: none;
line-height: 20px;
margin-bottom: 0;
flex: 1;
}
a.btn:hover,
a.btn:focus,
a.btn:active,
a.btn:visited {
color: #ffffff;
background-color: #1E5034;
text-decoration: none;
cursor: pointer;
}
.border:before {
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #1f5034;
position: absolute;
z-index: -1;
transition: all .3s ease;
transform: scale(0.85);
}
.border:hover:before {
transform: scale(0.95);
}
<div class="btn-grp">
<div class="border">
<a class="btn" href="#">Some really long text link #1</a>
</div>
<div class="border">
<a class="btn" href="#">Some other really long text link #2</a>
</div>
<div class="border">
<a class="btn" href="#">Some more really really long text link #3</a>
</div>
<div class="border">
<a class="btn" href="#">The last really long text link #4</a>
</div>
</div>
Well for IE 8 support use display:inline-block and transform to place the content in center...
.btn-grp {
text-align: center;
font-size: 0;
}
.border {
width: 20%;
height: 120px;
border: 2px solid #1E5034;
transition: all 250ms ease-out;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
position: relative;
padding: 10px;
}
a.btn {
text-align: center;
color: #ffffff;
font: 16px sans-serif;
text-decoration: none;
line-height: 20px;
margin-bottom: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
}
.border:before {
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #1f5034;
position: absolute;
z-index: -1;
transition: all .3s ease;
transform: scale(0.85);
}
.border:hover:before {
transform: scale(0.95);
}
<div class="btn-grp">
<div class="border">
<a class="btn" href="#">Some really long text link #1</a>
</div>
<div class="border">
<a class="btn" href="#">Some other really long text link #2</a>
</div>
<div class="border">
<a class="btn" href="#">Some more really really long text link #3</a>
</div>
<div class="border">
<a class="btn" href="#">The last really long text link #4</a>
</div>
</div>
I'm attempting to create transitions on the social media links on https://ollynural.github.io/ but i'm having trouble making it work as expected.
When hovering on each icon, my aim is for the hr bar to smoothly transition both left and right sides to the correct point whilst making it smaller. At the moment it moves the beginning of the bar to the set point of the smaller part and then reduces it smoothly. I'm not really sure how to approach this, i'm mainly experimenting with css and transitions now.
I've made a JSFiddle here as best I can.
.social-links {
margin: 0 auto;
width: 50%;
}
hr {
width: 90%;
border-top: 2px solid #8c8b8b;
transition: width 0.5s ease;
}
#media (min-width: 768px) {
.social-links {
width: 30%;
}
}
.social-links span {
width: 100%;
text-align: center;
font-size: 1.8rem;
margin-top: 15px;
}
#media (min-width: 420px) {
.social-links span {
font-size: 2rem;
margin-top: 25px;
}
}
.fa-github:hover {
color: #64a4df;
}
.github-link:hover ~ .social-line {
width: 7.5%;
margin-left: 9%;
}
.fa-linkedin-square:hover {
color: #64a4df;
}
.linkedin-link:hover ~ .social-line {
width: 7.5%;
margin-left: 34%;
}
.fa-twitter-square:hover {
color: #64a4df;
}
.twitter-link:hover ~ .social-line {
width: 7.5%;
margin-left: 59%;
}
.fa-facebook-square:hover {
color: #64a4df;
}
.facebook-link:hover ~ .social-line {
width: 7.5%;
margin-left: 84%;
}
.social-link {
margin-bottom: 20px;
padding-right: 0px;
padding-left: 0px;
height: 20px;
width: 20px;
background: red;
}
<div class="social-bar">
<div class="col-xs-12">
<div class="social-links">
<div class="col-xs-3 github-link social-link">
<a href="https://github.com/OllyNural" target="github">
<span class="fa fa-github"></span>
</a>
</div>
<div class="col-xs-3 linkedin-link social-link">
<a href="https://www.linkedin.com/in/oliver-nural-43565497" target="linkedin">
<span class="fa fa-linkedin-square"></span>
</a>
</div>
<div class="col-xs-3 twitter-link social-link">
<a href="https://twitter.com/OliverNural" target="twitter">
<span class="fa fa-twitter-square"></span>
</a>
</div>
<div class="col-xs-3 facebook-link social-link">
<a href="https://www.facebook.com/Olly.Nural" target="facebook">
<span class="fa fa-facebook-square"></span>
</a>
</div>
<hr class="social-line">
</div>
</div>
</div>
Thanks, Olly
You are changing two properties here, width and margin-left.
Therefore, you need to set transition both for width (as you did) and for margin-left.
For it to work smoothly, you will need to set a numeric initial value for `margin-left'.
This worked for me:
hr {
margin-left: 5%;
width: 90%;
border-top: 2px solid #8c8b8b;
transition: width 0.5s ease, margin-left 0.5s ease;
}
I'm trying to show a description when hovering over an image. I've already done it in a less than desirable way, using image sprites and hovers here: I want it to look exactly like how I have it, but using real text instead of an image.
I've tried a few different things but I can't seem to figure out how to do it. I'm trying to do it using HTML and CSS only, but I'm not sure if that's possible.
Feel free to poke around in my code, I'll paste what I think is relavent here.
HTML
div#projectlist {
width: 770px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 40px;
}
div#buzzbutton {
display: block;
float: left;
margin: 2px;
background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
width: 150px;
height: 150px;
}
div#buzzbutton:hover {
background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
width: 150px;
height: 150px;
background-position: 0 -150px;
}
div#slinksterbutton {
display: block;
float: left;
background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
width: 150px;
height: 150px;
margin: 2px;
}
div#slinksterbutton:hover {
background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
width: 150px;
height: 150px;
background-position: 0 -150px;
}
<div id="projectlist">
<div id="buzzbutton">
<img src="content/assets/thumbnails/transparent_150x150.png" alt="" />
</div>
<div id="slinksterbutton">
<img src="content/assets/thumbnails/transparent_150x150.png" alt="" />
</div>
</div>
It's simple. Wrap the image and the "appear on hover" description in a div with the same dimensions of the image. Then, with some CSS, order the description to appear while hovering that div.
/* quick reset */
* {
margin: 0;
padding: 0;
border: 0;
}
/* relevant styles */
.img__wrap {
position: relative;
height: 200px;
width: 257px;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description {
visibility: visible;
opacity: 1;
}
<div class="img__wrap">
<img class="img__img" src="http://placehold.it/257x200.jpg" />
<p class="img__description">This image looks super neat.</p>
</div>
A nice fiddle: https://jsfiddle.net/govdqd8y/
EDIT:
There's another option if you don't want to explicitly set the height of the <img> on the wrapping <div>, and that is simply setting the <div>'s display to inline-block. (Keep in mind, though, that it won't look good if the image fails to load.)
If you choose this option, you'll notice that there'll be a slight spacing between the <img> and the bottom of the wrapping <div>. That's because of the <img>'s default vertical-align value of baseline. If you set it to bottom it will disappear.
Here's a fiddle using this option: https://jsfiddle.net/joplomacedo/5cL31o0g/
In your HTML, try and put the text that you want to come up in the title part of the code:
<a href="buzz.html" title="buzz hover text">
You can also do the same for the alt text of your image.
You can also use the title attribute in your image tag
<img src="content/assets/thumbnails/transparent_150x150.png" alt="" title="hover text" />
This is what I use to make the text appear on hover:
* {
box-sizing: border-box
}
div {
position: relative;
top: 0px;
left: 0px;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
text-align: center
}
img {
width: 400px;
height: 400px;
position: absolute;
border-radius: 50%
}
img:hover {
opacity: 0;
transition:opacity 2s;
}
heading {
line-height: 40px;
font-weight: bold;
font-family: "Trebuchet MS";
text-align: center;
position: absolute;
display: block
}
div p {
z-index: -1;
width: 420px;
line-height: 20px;
display: inline-block;
padding: 200px 0px;
vertical-align: middle;
font-family: "Trebuchet MS";
height: 450px
}
<div>
<img src="https://68.media.tumblr.com/20b34e8d12d4230f9b362d7feb148c57/tumblr_oiwytz4dh41tf8vylo1_1280.png">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing <br>elit. Reiciendis temporibus iure dolores aspernatur excepturi <br> corporis nihil in suscipit, repudiandae. Totam.
</p>
</div>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="container">
<img src="http://lorempixel.com/500/500/" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
Reference Link W3schools with multiple styles
HTML
<img id="close" className="fa fa-close" src="" alt="" title="Close Me" />
CSS
#close[title]:hover:after {
color: red;
content: attr(title);
position: absolute;
left: 50px;
}
I saw a lot of people use an image tag. I prefer to use a background image because I can manipulate it. For example, I can:
Add smoother transitions
save time not having to crop images by using the "background-size: cover;" property.
The HTML/CSS:
.overlay-box {
background-color: #f5f5f5;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.overlay-box:hover .desc,
.overlay-box:focus .desc {
opacity: 1;
}
/* opacity 0.01 for accessibility */
/* adjust the styles like height,padding to match your design*/
.overlay-box .desc {
opacity: 0.01;
min-height: 355px;
font-size: 1rem;
height: 100%;
padding: 30px 25px 20px;
transition: all 0.3s ease;
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
<div class="overlay-box" style="background-image: url('https://via.placeholder.com/768x768');">
<div class="desc">
<p>Place your text here</p>
<ul>
<li>lorem ipsum dolor</li>
<li>lorem lipsum</li>
<li>lorem</li>
</ul>
</div>
</div>
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nelsonleite/pen/RaGwba?depth=everything&order=popularity&page=4&q=product&show_forks=false" />
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style class="cp-pen-styles">.product-description {
transform: translate3d(0, 0, 0);
transform-style: preserve-3d;
perspective: 1000;
backface-visibility: hidden;
}
body {
color: #212121;
}
.container {
padding-top: 25px;
padding-bottom: 25px;
}
img {
max-width: 100%;
}
hr {
border-color: #e5e5e5;
margin: 15px 0;
}
.secondary-text {
color: #b6b6b6;
}
.list-inline {
margin: 0;
}
.list-inline li {
padding: 0;
}
.card-wrapper {
position: relative;
width: 100%;
height: 390px;
border: 1px solid #e5e5e5;
border-bottom-width: 2px;
overflow: hidden;
margin-bottom: 30px;
}
.card-wrapper:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card-wrapper:hover:after {
opacity: 1;
}
.card-wrapper:hover .image-holder:before {
opacity: .75;
}
.card-wrapper:hover .image-holder:after {
opacity: 1;
transform: translate(-50%, -50%);
}
.card-wrapper:hover .image-holder--original {
transform: translateY(-15px);
}
.card-wrapper:hover .product-description {
height: 205px;
}
#media (min-width: 768px) {
.card-wrapper:hover .product-description {
height: 185px;
}
}
.image-holder {
display: block;
position: relative;
width: 100%;
height: 310px;
background-color: #ffffff;
z-index: 1;
}
#media (min-width: 768px) {
.image-holder {
height: 325px;
}
}
.image-holder:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #4CAF50;
opacity: 0;
z-index: 5;
transition: opacity 0.6s;
}
.image-holder:after {
content: '+';
font-family: 'Raleway', sans-serif;
font-size: 70px;
color: #4CAF50;
text-align: center;
position: absolute;
top: 92.5px;
left: 50%;
width: 75px;
height: 75px;
line-height: 75px;
background-color: #ffffff;
opacity: 0;
border-radius: 50%;
z-index: 10;
transform: translate(-50%, 100%);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: all 0.4s ease-out;
}
#media (min-width: 768px) {
.image-holder:after {
top: 107.5px;
}
}
.image-holder .image-holder__link {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 15;
}
.image-holder .image-holder--original {
transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.image-liquid {
width: 100%;
height: 325px;
background-size: cover;
background-position: center center;
}
.product-description {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
padding: 10px 15px;
overflow: hidden;
background-color: #fafafa;
border-top: 1px solid #e5e5e5;
transition: height 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 2;
}
#media (min-width: 768px) {
.product-description {
height: 65px;
}
}
.product-description p {
margin: 0 0 5px;
}
.product-description .product-description__title {
font-family: 'Raleway', sans-serif;
position: relative;
white-space: nowrap;
overflow: hidden;
margin: 0;
font-size: 18px;
line-height: 1.25;
}
.product-description .product-description__title:after {
content: '';
width: 60px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #fafafa);
}
.product-description .product-description__title a {
text-decoration: none;
color: inherit;
}
.product-description .product-description__category {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-description .product-description__price {
color: #4CAF50;
text-align: left;
font-weight: bold;
letter-spacing: 0.06em;
}
#media (min-width: 768px) {
.product-description .product-description__price {
text-align: right;
}
}
.product-description .sizes-wrapper {
margin-bottom: 15px;
}
.product-description .color-list {
font-size: 0;
}
.product-description .color-list__item {
width: 25px;
height: 10px;
position: relative;
z-index: 1;
transition: all .2s;
}
.product-description .color-list__item:hover {
width: 40px;
}
.product-description .color-list__item--red {
background-color: #F44336;
}
.product-description .color-list__item--blue {
background-color: #448AFF;
}
.product-description .color-list__item--green {
background-color: #CDDC39;
}
.product-description .color-list__item--orange {
background-color: #FF9800;
}
.product-description .color-list__item--purple {
background-color: #673AB7;
}
</style></head><body>
<!--
Inspired in this dribbble
https://dribbble.com/shots/986548-Product-Catalog
-->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<article class="card-wrapper">
<div class="image-holder">
<div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/24/Blue_Tshirt.jpg')">
</div>
</div>
<div class="product-description">
<!-- title -->
<h1 class="product-description__title">
<a href="#">
Adidas Originals
</a>
</h1>
<!-- category and price -->
<div class="row">
<div class="col-xs-12 col-sm-8 product-description__category secondary-text">
Men's running shirt
</div>
<div class="col-xs-12 col-sm-4 product-description__price">
€ 499
</div>
</div>
<!-- divider -->
<hr />
<!-- sizes -->
<div class="sizes-wrapper">
<b>Sizes</b>
<br />
<span class="secondary-text text-uppercase">
<ul class="list-inline">
<li>xs,</li>
<li>s,</li>
<li>sm,</li>
<li>m,</li>
<li>l,</li>
<li>xl,</li>
<li>xxl</li>
</ul>
</span>
</div>
<!-- colors -->
<div class="color-wrapper">
<b>Colors</b>
<br />
<ul class="list-inline color-list">
<li class="color-list__item color-list__item--red"></li>
<li class="color-list__item color-list__item--blue"></li>
<li class="color-list__item color-list__item--green"></li>
<li class="color-list__item color-list__item--orange"></li>
<li class="color-list__item color-list__item--purple"></li>
</ul>
</div>
</div>
</article>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<article class="card-wrapper">
<div class="image-holder">
<div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Jeans_BW_2_(3213391837).jpg/543px-Jeans_BW_2_(3213391837).jpg')">
</div>
</div>
<div class="product-description">
<!-- title -->
<h1 class="product-description__title">
<a href="#">
Adidas Originals
</a>
</h1>
<!-- category and price -->
<div class="row">
<div class="col-sm-8 product-description__category secondary-text">
Men's running shirt
</div>
<div class="col-sm-4 product-description__price text-right">
€ 499
</div>
</div>
<!-- divider -->
<hr />
<!-- sizes -->
<div class="sizes-wrapper">
<b>Sizes</b>
<br />
<span class="secondary-text text-uppercase">
<ul class="list-inline">
<li>xs,</li>
<li>s,</li>
<li>sm,</li>
<li>m,</li>
<li>l,</li>
<li>xl,</li>
<li>xxl</li>
</ul>
</span>
</div>
<!-- colors -->
<div class="color-wrapper">
<b>Colors</b>
<br />
<ul class="list-inline color-list">
<li class="color-list__item color-list__item--red"></li>
<li class="color-list__item color-list__item--blue"></li>
<li class="color-list__item color-list__item--green"></li>
<li class="color-list__item color-list__item--orange"></li>
<li class="color-list__item color-list__item--purple"></li>
</ul>
</div>
</div>
</article>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<article class="card-wrapper">
<div class="image-holder">
<div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b8/Columbia_Sportswear_Jacket.jpg')">
</div>
</div>
<div class="product-description">
<!-- title -->
<h1 class="product-description__title">
<a href="#">
Adidas Originals
</a>
</h1>
<!-- category and price -->
<div class="row">
<div class="col-sm-8 product-description__category secondary-text">
Men's running shirt
</div>
<div class="col-sm-4 product-description__price text-right">
€ 499
</div>
</div>
<!-- divider -->
<hr />
<!-- sizes -->
<div class="sizes-wrapper">
<b>Sizes</b>
<br />
<span class="secondary-text text-uppercase">
<ul class="list-inline">
<li>xs,</li>
<li>s,</li>
<li>sm,</li>
<li>m,</li>
<li>l,</li>
<li>xl,</li>
<li>xxl</li>
</ul>
</span>
</div>
<!-- colors -->
<div class="color-wrapper">
<b>Colors</b>
<br />
<ul class="list-inline color-list">
<li class="color-list__item color-list__item--red"></li>
<li class="color-list__item color-list__item--blue"></li>
<li class="color-list__item color-list__item--green"></li>
<li class="color-list__item color-list__item--orange"></li>
<li class="color-list__item color-list__item--purple"></li>
</ul>
</div>
</div>
</article>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<article class="card-wrapper">
<div class="image-holder">
<div class="image-liquid image-holder--original" style="background-image: url('http://www.publicdomainpictures.net/pictures/20000/nahled/red-shoes-isolated.jpg')">
</div>
</div>
<div class="product-description">
<!-- title -->
<h1 class="product-description__title">
<a href="#">
Adidas Originals
</a>
</h1>
<!-- category and price -->
<div class="row">
<div class="col-sm-8 product-description__category secondary-text">
Men's running shirt
</div>
<div class="col-sm-4 product-description__price text-right">
€ 499
</div>
</div>
<!-- divider -->
<hr />
<!-- sizes -->
<div class="sizes-wrapper">
<b>Sizes</b>
<br />
<span class="secondary-text text-uppercase">
<ul class="list-inline">
<li>xs,</li>
<li>s,</li>
<li>sm,</li>
<li>m,</li>
<li>l,</li>
<li>xl,</li>
<li>xxl</li>
</ul>
</span>
</div>
<!-- colors -->
<div class="color-wrapper">
<b>Colors</b>
<br />
<ul class="list-inline color-list">
<li class="color-list__item color-list__item--red"></li>
<li class="color-list__item color-list__item--blue"></li>
<li class="color-list__item color-list__item--green"></li>
<li class="color-list__item color-list__item--orange"></li>
<li class="color-list__item color-list__item--purple"></li>
</ul>
</div>
</div>
</article>
</div>
</div>
</div>
</body></html>
The sample is made
<html>
<head>
<style>
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
</style>
</head>
<body>
<h2>Display an Element on Hover</h2>
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
</body>
</html>
For accessibility reasons, you should use the correct semantic tags. Use a figure as a container and include the text to the image as figcaption.
Apply position: absolute to the container and then position: absolute to the figcaption.
Simply hide the figcaption with display: block and make it visible again by using :hover on the wrapping figure element.
figure {
position: relative;
}
figcaption {
position: absolute;
inset: 2px;
display: none;
}
figure:hover figcaption {
display: flex;
}
/* for visualization only */
figure {
display: inline-block;
}
figcaption {
padding: 1em;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.7);
}
img {
border: 2px dashed red;
}
<figure>
<img src="https://via.placeholder.com/200.jpg" alt="placeholder image used for demonstration">
<figcaption>placeholder image used for demonstration</figcaption>
</figure>