.destination {
position: relative;
}
.dest-topic{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
color: #fff;
visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.destination:hover .dest-topic {
visibility: visible;
padding:0px !important;
}
.dest-title {
color: white;
font-size: 18px;
transition: .1s;
transform: translateY(1em);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/css/uikit.min.css" rel="stylesheet"/>
<div class=" uk-child-width-1-2 uk-padding-xsmall uk-child-height-1-2 " uk-grid="">
<div class="uk-first-column">
<div class="uk-child-width-expand#s uk-padding-xsmall uk-text-center " uk-grid="">
<div class="uk-first-column uk-panel uk-padding-xsmall destination">
<img src="https://source.unsplash.com/1200x500/?heli"alt="" class="dest-image">
<div class="dest-topic">
<div class="dest-title">Annapurna Base Camp</div>
</div>
</div>
</div>
</div>
<div>
<div class="uk-child-width-expand#s uk-text-center " uk-grid="">
<div class="uk-panel uk-padding-xsmall destination">
<img src="https://source.unsplash.com/1200x500/?annapurna" alt="" class="dest-image">
<div class="dest-topic">
<div class="dest-title">Everest Base Camp</div>
</div>
</div>
</div>
</div>
</div>
This code is written in uikit framework. There are two uikit image. When I hover the image, overlay background image color come out. I want to remove that extra overlay background image color. It shows exact the image only. when I hover the image. It cover only the background-image.
Set left:30px in .dest-topic, because left 30px padding given in .uk-grid>* class
.destination {
position: relative;
}
.dest-topic {
position: absolute;
top: 0;
bottom: 0;
left: 30px;
right: 0;
background: rgba(0, 0, 0, 0.3);
color: #fff;
visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.destination:hover .dest-topic {
visibility: visible;
padding:0px !important;
}
.dest-title {
color: white;
font-size: 18px;
transition: .1s;
transform: translateY(1em);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/css/uikit.min.css" rel="stylesheet"/>
<div class=" uk-child-width-1-2 uk-padding-xsmall uk-child-height-1-2 " uk-grid="">
<div class="uk-first-column">
<div class="uk-child-width-expand#s uk-padding-xsmall uk-text-center " uk-grid="">
<div class="uk-first-column uk-panel uk-padding-xsmall destination">
<img src="https://source.unsplash.com/1200x500/?heli"alt="" class="dest-image">
<div class="dest-topic">
<div class="dest-title">Annapurna Base Camp</div>
</div>
</div>
</div>
</div>
<div>
<div class="uk-child-width-expand#s uk-text-center " uk-grid="">
<div class="uk-panel uk-padding-xsmall destination">
<img src="https://source.unsplash.com/1200x500/?annapurna" alt="" class="dest-image">
<div class="dest-topic">
<div class="dest-title">Everest Base Camp</div>
</div>
</div>
</div>
</div>
</div>
Related
I'm attempting to centre an image and div layer inside a containing div, but so far I can't get it to move from the left of the column. I've tried a few different ways but just can't get it to move. Even the margin auto trick isn't working, which I suspect is because bootstrap 4 is a flex box now.
HTML:
#user-avatar {
background: #ff4e00;
border-radius: 50%;
width: 250px;
margin-bottom: 25px;
position: relative;
}
#user img {
border-radius: 50%;
width: 250px;
transition: .5s ease;
backface-visibility: hidden;
}
#user-avatar:hover img {
cursor: pointer;
opacity: 0.3;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.middle i {
font-size: 34px;
}
#user-avatar:hover .middle {
opacity: 1;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="user" class="col-12">
<div class="col-12" id="user-avatar">
<img class="mx-auto d-block" src="assets/users/av-lg/liane.png" />
<div class="middle">
<i class="fas fa-camera-alt"></i>
<p>Edit Avatar</p>
</div>
</div>
<p id="username" class="text-center"><span>Howdy </span>Liane</p>
<div id="xp-bar" class="text-left">
<div id="xp"><p><i class="fas fa-stars"></i> XP</p></div>
</div>
<p id="stats" class="text-right">Level 1</p>
</div>
It's the image and the 'underlay' ('middle' div) that I need to be in the center.
Add margin-left: 50% and transform: translateX(-50%) to #user-avatar. check below link.
thank you
http://jsfiddle.net/x1hphsvb/10994/
Add Class on id="user-avatar" to mx-auto
<div class="col-12 mx-auto" id="user-avatar">
<img class="d-block" src="assets/users/av-lg/liane.png" />
<div class="middle">
<i class="fas fa-camera-alt"></i>
<p>Edit Avatar</p>
</div>
</div>
https://jsfiddle.net/lalji1051/v06j8orn/9/
simply add this style - centrd now
#user-avatar {
margin: 0 auto;
}
Trying to position my image without changing the position. When the wind text is turned off(js not working in codepen btw. ) ie not displayed under the temperature, the weatherimage is moving up. I tried to position this 'absolute' but not helping.
I am using reactjs to display the Widget on the right:
<div className="widget">
<div className="row">
<div className="col-lg-12 title">{title}</div>
</div>
<div className="row widgettop">
<div className="col-lg-6 topicon">
<img src={'http://openweathermap.org/img/w/' + icon + '.png'}></img>
</div>
<div className="col-lg-6 topdegrees">
{location}
<div className='degrees'>{degrees}°</div>
{wind && <div>Wind{' '}<span className='wind'>{speed}</span> {unitsType === 'metric' ? <span>km/h</span> : <span>mph</span>}</div>}
</div>
</div>
</div>
Based on the state.wind I display the wind details or not.
How can I keep the image in position when the Wind text/ other content is removed/changed?
codepen here
You can toggle the visibility property for the wind area using JS. The image holds its place when I added visibility: hidden to say #windArea - you can toggle between visible and hidden:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-family: Lucida Grande;
}
input,
label {
display: block;
}
#tempArea input,
#tempArea label {
display: inline;
margin-bottom: 10px;
}
#windArea input,
#windArea label {
display: inline;
margin-bottom: 10px;
}
div#main {
background: #F2F2F2;
padding: 1vw 2vw;
width: 48%;
}
.spaceradio {
margin-right: 10px;
}
img {
width: 84% !important;
height: 100% !important;
margin-left: 20%;
position: relative;
}
.divider {
border-left: 1px solid lightgrey;
}
.widget {
box-shadow: 1px 2px 1px lightgray;
background-color: white;
margin-left: 10px;
height: 100%;
width: 90%;
position: absolute;
}
.title {
margin-left: 30px;
padding: 10px;
position: absolute;
}
.left {
margin-left: 20px;
padding: 10px;
vertical-align: top;
}
.text {
height: 40px;
width: 100%;
}
.top {
margin-top: 15px;
}
.widgettop {
margin-top: 15px;
}
.topdegrees {
margin-top: 40px;
}
.topicon {
margin-top: 20px;
}
.degrees {
font-size: xx-large;
font-weight: bold;
}
.wind {
font-size: small;
font-weight: bold;
}
.hline {
border-top: 4px solid blue;
padding: 0 !important;
margin-bottom: 10px;
width: 48%;
}
/* .abs
{
position: absolute;
} */
#windArea { /* ADDED */
visibility: hidden;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="left">
<hr class="container hline">
<div id="main" class="container border">
<div class="row">
<div class="col-lg-6 top"><label for="title">Title</label><input id="title" type="text" placeholder=" Title of widget" name="title" class="text" value="">
<div class="top"><label for="radio">Temperature</label>
<div id="tempArea" class="row"><span class="col-lg-6"><input type="radio" id="one" class="spaceradio" value="metric" checked=""><label for="one">℃</label></span><span class="col-lg-6"><input type="radio" id="two" class="spaceradio" value="imperial"><label for="two">℉</label></span></div>
</div>
<div class="top"><label for="radio">Wind</label>
<div id="windArea" class="row"><span class="col-lg-6"><input type="radio" id="one" class="spaceradio" value="true"><label for="one">On</label></span><span class="col-lg-6"><input type="radio" id="two" class="spaceradio" value="false" checked=""><label for="two">Off</label></span></div>
</div>
</div>
<div class="col-lg-6 divider top">
<div class="widget">
<div class="row">
<div class="col-lg-12 title">FDSFSDFDSFDSFDS</div>
</div>
<div class="row widgettop">
<div class="col-lg-6 topicon"><img src="http://openweathermap.org/img/w/09d.png"></div>
<div class="col-lg-6 topdegrees abs">Paramatta
<div class="degrees">58.12°</div>
<div>Wind <span class="wind">23.04</span> <span>mph</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am having some big problems with padding. Before the description of my problem make sense, there is 2 pages to see in the inspector window - and look in the mobile view device section:
1: This demopage is working as it should.
2: This demopage is not working.
The difference between the 2 pages is that I added one more row with three pictures in it. The row with 3 pictures is basic builded up like this:
<div class="row wrapping">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8 margin_bottom">
<!-- Picture 1 -->
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12 margin_bottom">
<!-- Picture 2 -->
</div>
</div>
<div class="row">
<div class="col-sm-12 margin_bottom">
<!-- Picture 3 -->
</div>
</div>
</div>
</div>
</div>
</div>
As I see it there is set a padding on the inner columns col > row > col? How can I remove that padding? I removed the padding on the rows with the below code, and thought that would also count for all columns.
.row.wrapping {
margin-right: 0;
margin-left: 0;
}
.wrapping > [class^="col-"], .wrapping > [class^=" col-"] {
padding-right: 0;
padding-left: 0;
}
The most important thing is that I cannot start overwriting Bootstrap classes since the whole site is building up with bootstrap. So every change I am overwriting in the bootstrap framework has to be named unique.
#front .row {
padding-bottom: 0px!important;
}
body {
background-color: #f5f5f5;
}
/* Removes default right padding */
.row.wrapping {
margin-right: 0;
margin-left: 0;
}
.wrapping>[class^="col-"],
.wrapping>[class^=" col-"] {
padding-right: 0;
padding-left: 0;
}
/* Set width between grid elements */
.small-padding.top {
padding-top: 10px;
}
.small-padding.bottom {
padding-bottom: 10px;
}
.small-padding.left {
padding-left: 5px;
}
.small-padding.right {
padding-right: 5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 2%;
left: 6%;
}
/* Position text on full width banner */
.header-container {
color: white;
margin: 0 5%;
}
.banner-text {
position: absolute;
bottom: 3%;
left: 1%;
width: 80%;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
text-transform: uppercase;
}
.blue-font {
color: #00a9ff;
text-transform: uppercase;
margin-top: -10px;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
height: auto;
}
/* btn-success: */
.btn-success {
width: fit-content;
}
}
#media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
/* Hover for grid elements that contains text */
.hovereffect {
display: inline-block;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(170, 170, 170, 0.4);
}
.hovereffect h2,
.hovereffect img {
transition: all 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
transform: scale(1.1);
}
.hovereffect:hover img {
transform: scale(1);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect p.info {
text-decoration: none;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
transform: scale(1.5);
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 90%;
width: 90%;
top: 5%;
/* (100% - 85%)/2 */
left: 5%;
position: absolute;
text-align: left;
padding: 20px 20px 20px 20px;
}
.hovereffect:hover p.info {
opacity: 1;
transform: scale(1);
background-color: rgba(0, 0, 0, 0.4);
}
/* Hover fadeout head and subline */
.hovereffect:hover .inner-wrapper.bottom-left h3,
.hovereffect:hover .inner-wrapper.bottom-left span {
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .inner-wrapper.bottom-left h3,
.hovereffect:hover .inner-wrapper.bottom-left span {
opacity: 0;
}
/* Hover opacity for grid elements without text*/
.column {
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
figure {
margin: 0;
padding: 0;
background: #fff;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
/* Opacity #1 */
.hover11 figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: 0.8s ease-in-out;
}
.hover11 figure:hover img {
opacity: .5;
}
<div class="wrapper">
<div class="row wrapping">
<div class="col-xs-12 col-sm-12 margin_bottom">
<!--<div class="hover11 column">-->
<a href="#">
<picture>
<source media="(min-width: 650px)" srcset="https://mimsi.dk/Static/Cms/d211428c-7ea9-4805-8b66-ee73d7f1df2d.jpg"></source>
<source media="(min-width: 320px)" srcset="https://mimsi.dk/Static/Cms/b1cbb0f1-9e91-4d55-8a8e-65631432c38b.jpg"></source>
<img src="http://mimsi.dk/Static/Cms/d211428c-7ea9-4805-8b66-ee73d7f1df2d.jpg" alt="mimsi Partnerværksteder" style="width:100%;"></img>
</picture>
<div class="inner-wrapper banner-text">
<div class="header-container">
<h2 class="blue-font" style="text-shadow: 2px 2px #000000;">Find nærmeste mimsi </h2>
<p class="light-font" style="text-shadow: 2px 2px #000000;">#</p>
<!--<span class="btn btn-primary" role="button">Lorem Ipsum</span>-->
</div>
</div>
</a>
<!--</div>-->
</div>
</div>
<!-- DELETE THIS ROW IN THE INSPECT WINDOW -->
<div class="row wrapping">
<div class="col-sm-12">
<div class="row">
<a href="/da-dk/page/bmw-packages/">
<div class="col-sm-8 margin_bottom">
<div class="hover11 column">
<figure>
<picture>
<source media="(min-width: 650px)" srcset="https://mimsi.dk/Static/Cms/f30dfbf6-047a-4aa4-829f-48d4223d05be.jpg"></source>
<source media="(min-width: 320px)" srcset="https://mimsi.dk/Static/Cms/ce50c03a-0e95-4760-95a4-e2ad2a1b6e43.jpg"></source>
<img src="https://mimsi.dk/Static/Cms/f30dfbf6-047a-4aa4-829f-48d4223d05be.jpg" alt="Lorem Ipsum" style="width:100%;"></img>
</picture>
</figure>
</div>
<div class="inner-wrapper bottom-left">
<h3 class="light-font" style="color:#333">Lorem Ipsum</h3>
<span class="light-font" style="color:#00a9ff">Lorem Ipsum</span>
<!--<button class="btn btn-success btn-lg">Læs mere</button>-->
</div>
</div>
</a>
<div class="col-sm-4">
<div class="row">
<a href="#">
<div class="col-sm-12 margin_bottom">
<div class="hover11 column">
<figure>
<img src="https://mimsi.dk/Static/Cms/7da4b142-e174-4dd4-aa44-cb175c1f92f0.jpg" alt="mimsi Lorem Ipsum" class="img-responsive"></img>
</figure>
</div>
<div class="inner-wrapper bottom-left">
<h4 class="light-font" style="color:#00a9ff">Vi er eneforhandler I Danmark</h4>
<span class="light-font">Lorem Ipsum</span>
<!--<button class="btn btn-success btn-lg">Læs mere</button>-->
</div>
</div>
</a>
</div>
<div class="row">
<a href="#">
<div class="col-sm-12 margin_bottom">
<div class="hover11 column">
<figure>
<a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding">
<img src="https://mimsi.dk/Static/Cms/d065fdf8-a5b1-4137-ba54-74c351185d36.jpg" alt="Signup newsletter" class="img-responsive"></img>
</a>
</figure>
</div>
<div class="modal fade" id="nyhedsbrev-tilmelding" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="mc_embed_signup">
</div>
</div>
</div>
</div>
</div>
<div class="inner-wrapper bottom-left"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
I'm not sure what you want to achieve, but for me, if you make a very little change at page https://koed.dk/da-dk/page/stack like below, then effect is great:
.row.wrapping,
.row.wrapping .row {
margin-left: -5px;
margin-right: -5px;
}
.wrapping [class^=col-] {
padding-left: 5px;
padding-right: 5px;
}
Brother in your styles you have this code .
.margin_bottom {
margin-bottom: 10px;
}
Remove it. That'll solve your problem.
One solution to your problem is that make a new css class no-padding like this
.no-padding{
padding-right: 0!important;
padding-left: 0!important;
}
And then add the no-padding class to your html row or col for which you want to remove padding like this.
<div class="row wrapping">
<div class="col-sm-12 no-padding"> <!-- notice here -->
<div class="row">
<div class="col-sm-8 margin_bottom no-padding"><!-- notice here -->
<!-- Picture 1 -->
</div>
<div class="col-sm-4 no-padding"><!-- notice here -->
<div class="row">
<div class="col-sm-12 margin_bottom no-padding"><!-- notice here -->
<!-- Picture 2 -->
</div>
</div>
<div class="row">
<div class="col-sm-12 margin_bottom no-padding"><!-- notice here -->
<!-- Picture 3 -->
</div>
</div>
</div>
</div>
</div>
</div>
In this way you won't have to override the bootstrap classes and you won't break the layout.
THE PROBLEM
I have a swiper slider: http://codepen.io/kerowan/pen/xqYrwJ (recreate problem for example by giving .product-info-wrapper a fixed height of around 100px)
In the slides, there is an image and an infobox, which initially looks like this:
When I click on "Kurzinfo", the box needs to expand and finally look like this (the .swiper-container ends just after the NEW badge, so it has to flow over the swiper-container):
The problem is, that .swiper-container has an overflow: hidden; attribute, to hide the slides that continue to the right side.
WHAT HAVE I TRIED?
1) I have tried changing overflow: hidden; on the .swiper-container to overflow-x: hidden; in an attempt to just hide the slides which flow to the right, but show stuff that overflows downwards. This results in .swiper-container just adding a scrollbar, which lets you scroll down to see the content that should overflow.
2) I have tried changing position: absolute; on .product-info-wrapper (which wraps the box and the badge) to position: fixed;, because I read that the overflow attribute is ignored by position: fixed;. This doesn't seem to solve the problem, however.
I have not tried anything else yet, simply because I don't know any other solution approach.
SNIPPET
I pasted the snippet here, but it won't work, because I used SCSS and unfortunately lack the time to rewrite it to pure CSS. Can be copied to codepen, though, if the link above should die.
$(document).ready(function() {
var productsInFocus = new Swiper ('.products-in-focus', {
nextButton: '.product-focus-next',
prevButton: '.product-focus-prev',
slidesPerView: 4,
loop: false,
spaceBetween: 20
});
});
.content-wrapper {
max-width: 1100px;
margin: 0 auto;
}
.product-wrapper {
position: relative;
margin-bottom: 1rem * 5;
margin-top: 1rem * 5;
.swiper-slide {
display: flex;
justify-content: center;
align-items: flex-start;
position: relative;
min-height: 230px;
.product-badge-wrapper {
position: absolute;
bottom: 0;
right: 0;
.product-badge {
position: relative;
width: 100px;
overflow: hidden;
&.red {
&:before,
&:after {
border-color: #CF043C;
background-color: transparent;
}
&:after {
background-color: transparent;
border-left-color: transparent;
}
.product-badge-content {
&:before {
border-color: darken(#CF043C, 10%);
border-left-color: transparent;
border-right-color: transparent;
}
}
}
&.dark-gray {
&:before,
&:after {
border-color: lighten(#000, 37.4%);
background-color: transparent;
}
&:after {
background-color: transparent;
border-left-color: transparent;
}
.product-badge-content {
&:before {
border-color: lighten(#000, 13.5%);
border-left-color: transparent;
border-right-color: transparent;
}
}
}
&:before,
&:after {
content: "";
position: absolute;
left: 0;
background-color: transparent;
border-color: lighten(#000, 73%);
}
&:before {
top: 20px;
right: 0;
bottom: 0;
}
&:after {
bottom: auto;
left: -1px;
top: -10px;
border-style: solid;
border-width: 0 0 75px 75px;
background-color: transparent;
border-left-color: transparent;
width: 100px;
}
.product-badge-content {
height: 43px;
padding-right: 5px;
padding-left: 22px;
display: flex;
justify-content: flex-end;
align-items: center;
text-align: right;
text-transform: uppercase;
font-weight: 700;
position: relative;
z-index: 10;
color: #fff;
&.text-small {
font-size: .7rem;
font-weight: 400 !important;
}
&:before {
content: "";
position: absolute;
left: 11px;
bottom: 0;
display: block;
border-style: solid;
border-color: lighten(#000, 37.4%);
border-left-color: transparent;
border-right-color: transparent;
border-width: 10px 10px 0 10px;
}
}
}
}
.product-info-wrapper {
position: absolute;
bottom: 0;
max-width: 100%;
width: 100%;
padding-bottom: 10px;
.product-info {
position: relative;
padding: 1rem * .5;
padding-right: 1rem * 2;
overflow: hidden;
&-link {
display: block;
a {
color: lighten(#000, 37.4%);
transition: color 400ms ease-in-out;
&:hover {
color: #CF043C;
text-decoration: none;
}
}
}
&-price {
color: #CF043C;
&-del {
color: lighten(#000, 37.4%);
text-decoration: line-through;
font-size: .9rem;
}
}
&:before,
&:after {
position: absolute;
content: "";
left: 0;
z-index: -1;
background-color: lighten(#000, 93.5%);
border-color: lighten(#000, 93.5%);
}
&:before {
top: 0;
right: 0;
bottom: 35px;
}
&:after {
top: auto;
right: -5px;
bottom: 0;
border-style: solid;
border-width: 35px 35px 0 0;
background-color: transparent;
border-right-color: transparent;
}
}
}
}
.product-focus-prev,
.product-focus-next {
position: absolute;
color: lighten(#000, 37.4%);
background-image: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.product-focus-prev {
left: -1rem * 10;
}
.product-focus-next {
right: -1rem * 10;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/b13050afbe.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="content-wrapper narrow products-in-focus">
<div class="product-wrapper">
<div class="swiper-container products-in-focus">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-7">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-5 text-right">
<div class="product-info-price">CHF 34.00</div>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge dark-gray">
<div class="product-badge-content text-center">
%
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Basic Minerals</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge red">
<div class="product-badge-content">
new
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Whey Isolat CFM</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge">
<div class="product-badge-content text-small">
nicht<br>auf lager
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge red">
<div class="product-badge-content">
new
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Basic Minerals</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<img src="http://www.placehold.it/80x130">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Whey Isolat CFM</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge">
<div class="product-badge-content text-small">
nicht<br>auf lager
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-focus-prev"><i class="fa fa-chevron-left"></i></div>
<div class="product-focus-next"><i class="fa fa-chevron-right"></i></div>
</div>
</div>
</div>
I hope my question was clear enough. If you need more details, please let me know!
You can add:
.swiper-slide {
padding-bottom: 30px;
}
where 30px is the value your badge should be beyond the border.
http://codepen.io/Deka87/pen/xqYXOq
I found a solution, I feel like it's a bit of a hack, however. For what it's worth, here it is:
.swiper-container {
overflow: visible;
}
$slide: ".swiper-slide";
.swiper-slide {
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
&-active {
opacity: 1;
visibility: visible;
#for $i from 1 through 3 {
& + #{$slide} {
opacity: 1;
visibility: visible;
}
$slide: "#{$slide} + .swiper-slide";
}
}
}
So, what I do here is setting .swiper-container from overflow: hidden; to overflow: visible and then I tell every .swiper-slide to have opacity: 0; except for the &-active one. I then use the &-active slide as a starting point and iterate through a sass for-loop 3 times to add opacity: 1; for the next 3 .swiper-slides. This sass code produces the following pure css code (.swiper-container not included here)
.swiper-slide {
opacity: 0;
visibility: hidden;
transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
}
.swiper-slide-active {
opacity: 1;
visibility: visible;
}
.swiper-slide-active + .swiper-slide {
opacity: 1;
visibility: visible;
}
.swiper-slide-active + .swiper-slide + .swiper-slide {
opacity: 1;
visibility: visible;
}
.swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
opacity: 1;
visibility: visible;
}
This whole stuff is just to remove the overflow: hidden; from .swiper-container while still showing only the slides I need to see and hiding the others.
Now I can play around with the height of the Infobox and the effect I was looking for works.
<style>
//as we want to see details which are being cut of by default css from swiper contner we change it top overflow visible.
.swiper-container {
overflow: visible;
}
//we changed over hidden to visible all slides of the swiper slider would we visible so we need to hide them so we add below css.
.swiper-slide{
opacity: 0;
visibility: hidden;
}
// now because of the above css all the slider are set to opacity 0 , which makes them not visible, now as we want to see out active and next slide we supply below css by using their name. and set there opacity to 1.
.swiper-slide.swiper-slide-active,.swiper-slide.swiper-slide-next,.swiper-slide.swiper-slide-prev{
opacity: 1;
visibility: visible;
}
</style>
I recently had a similar problem in my react project and solved it by wrapping up the whole swiper component with a div and giving it the following properties:
.sliderContainer { position: relative; z-index: 2; height: 25rem; }
Another thing you gotta do is remove position: relative; from .swiper class like this:
.swiper { position: unset !important; }
Doing this will allow you to bypass the overflow: hidden; of .swiper class and essentially will bind child elements to the wrapper div and you'll be able to expand your div as much as you'd like without it being cropped off by the slider.
Also when defining a height for the slider, you should add it to the wrapper div you created instead of adding it to .swiper.
You can use custom padding, margin.
.swiper {
padding: 13px !important;
margin: -13px !important;
}
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>