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;
}
Related
I need a animated menu without js.
I create it using "transform" tag.
But Problem is : Footer menu not hidden by label after opened.
Searches not given any results.
Footer also has gradient color otherwise I'd hide it with a color block
I try play with z-index but no results
Must be
At the moment, the menu appears at the top of the label, but should be at the bottom.
How do I make the menu appear at the bottom or overlap with the label?
#media (max-width:992px) {
footer {
line-height: 2.2
}
.taber {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
margin-bottom: 5px;
position: relative
}
.taber:after {
content: '';
width: 10px;
height: 10px;
position: absolute;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
top: 12px;
right: 5px;
float: right;
transition: transform .5s
}
.taber {
cursor: pointer
}
footer :checked+div .mblock {
position: initial;
visibility: visible;
z-index: 1;
transform: none;
transition: transform .5s
}
footer .mblock {
position: absolute;
overflow: hidden;
visibility: hidden;
z-index: -1;
transform: translateY(-80px)
}
:checked+div .taber:after {
transform: rotateZ(135deg)
}
}
.top {
overflow: hidden;
z-index: 2;
position: relative
}
.bg-gradient-inv {
background: linear-gradient(180deg, blue,#003);
}
footer {
background: #003;
color: white
}
.tr {
color: white
}
.hide {
display: none
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
Click to footer to view the problem
<br> more text body
<footer class="pt-4 px-4 pb-5 pt-5 bg-gradient-inv">
<div class=container>
<div class=row>
<div class="col-12 col-lg-2 top">
<input class="hide" type="checkbox" id="f1">
<div>
<div class="col-12 top"><label class="small nw tr taber pt-2 d-block" for=f1>Footer</label></div>
<div class=mblock>
<div class="col-12"><a class="small nw tr d-block" href=/>1</a>
</div>
<div class="col-12"><a class="small nw tr d-block" href=/>2</a>
</div>
<div class="col-12"><a class="small nw tr d-block" href=/>3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is very unclear but from what i've understand you should have a div wrapping mblock. This div would have the size of mblock and overflow hidden. This div would not move, but mblock would move inside it. So when mblock is outside of it, it would not appear.
#media (max-width:992px) {
footer {
line-height: 2.2
}
.taber {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
margin-bottom: 5px;
position: relative
}
.taber:after {
content: '';
width: 10px;
height: 10px;
position: absolute;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(45deg);
top: 12px;
right: 5px;
float: right;
transition: transform .5s
}
.taber {
cursor: pointer
}
footer :checked+div .mblock {
position: initial;
visibility: visible;
z-index: 1;
transform: none;
transition: transform .5s
}
footer .mblock {
position: absolute;
overflow: hidden;
visibility: hidden;
z-index: -1;
transform: translateY(-80px)
}
:checked+div .taber:after {
transform: rotateZ(135deg)
}
}
.top {
overflow: hidden;
z-index: 2;
position: relative
}
.bg-gradient-inv {
background: linear-gradient(180deg, blue,#003);
}
.mblock_wrapper{
overflow:hidden;
}
footer {
background: #003;
color: white
}
.tr {
color: white
}
.hide {
display: none
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
Click to footer to view the problem
<br> more text body
<footer class="pt-4 px-4 pb-5 pt-5 bg-gradient-inv">
<div class=container>
<div class=row>
<div class="col-12 col-lg-2 top">
<input class="hide" type="checkbox" id="f1">
<div>
<div class="col-12 top"><label class="small nw tr taber pt-2 d-block" for=f1>Footer</label></div>
<div class ="mblock_wrapper">
<div class=mblock>
<div class="col-12"><a class="small nw tr d-block" href=/>1</a>
</div>
<div class="col-12"><a class="small nw tr d-block" href=/>2</a>
</div>
<div class="col-12"><a class="small nw tr d-block" href=/>3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I don't know how to make text in the photo, and make a link in the whole photo. I've made a darkening effect which I don't want to change, I just want to add text to it. I really want to keep the current dimensions and, above all, responsiveness.
There is link to codepen: 'https://codepen.io/pawe-dejda/pen/XyPzpK'
body, html {
height: 100%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.responsive {
width: 100%;
max-width: 88px;
height: auto;
position: center;
}
.tz-gallery .row > div {
padding: 2px;
margin-bottom: 4px;
}
.tz-gallery .lightbox img {
width: 100%;
border-radius: 0;
position: relative;
}
#media(max-width: 768px) {
body {
padding: 0;
}
}
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://dejda.e-kei.pl/nuar/css/style.css">
<div class="w3-container w3-padding-64 w3-black">
<div class="w3-content">
<div class="tz-gallery">
<div class="row no-gutters">
<div class="col-sm-6 col-md-4">
<a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox fade" href="http://dejda.e-kei.pl/nuar/images/mieszkanie-w-kamienicy-lodz/mieszkanie-w-kamienicy-lodz5.jpg">
<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
If i understand correctly, you want to be able to post links (link can be a-href, h1, h2, span etc') on top of your picture. To do so, do the following:
1. write a container div. for example:
<div>
text
</div>
set its style (CSS) to the background picture you want. Make sure the div's sizes fit the picture size. Then, inside the div you can simply write down the tag you wish (text). for example:
< span >
text
< /span >
Now things get interesting. In order to position the text inside the div? => set the div's position to relative (position:relative;) and set the span position to absolute. then play around with the top / left / bottom / right of the absoloute position, and text would appear whereever you want it to.
Here's an updated codepen
https://codepen.io/kelvinsusername/pen/YROYZM
It adds a container with some text in it but makes it opaque, then on hover instead of making it less visible (like the image) it makes it more visible.
.fade:hover .description {
opacity: 1;
}
.description {
position: absolute;
z-index: 100;
opacity: 0;
color: #fff;
font-size: 20px;
}
.tz-gallery .row>div {
padding: 2px;
margin-bottom: 4px;
}
.tz-gallery .lightbox img {
width: 100%;
border-radius: 0;
position: relative;
}
.img-text-box {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.479);
color: #ffffff;
width: 100%;
padding: 20px;
font-family: Arial;
font-size: 17px;
}
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
color: #e9e9e9;
}
.fade:hover {
opacity: 0.5;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="tz-gallery">
<div class="container">
<div class="row">
<div class="col-md-4">
<a class="lightbox fade" href="">
<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
<div class="img-text-box">
<p>Be brave js is cool</p>
</div>
</a>
</div>
<div class="col-md-4">
<a class="lightbox fade" href="">
<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
<div class="img-text-box">
<p>Readability counts.</p>
</div>
</a>
</div>
<div class="col-md-4">
<a class="lightbox fade" href="">
<img src="http://dejda.e-kei.pl/nuar/images/thumbnails/mieszkanie-w-kamienicy-lodz.jpg" alt="">
<div class="img-text-box">
<p>If the implementation is hard to explain, it's a bad idea.</p>
</div>
</a>
</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.
I am a student and new to coding. I have an image and would like the actors name to appear in center of image as a clickable link to show as a hover effect. This is what I want it to look like!
I tried the code that is listed on the link above but name will not show as link. Here's a screenshot since it's just a file on my computer.
I have included coding for two of the 10 images I will use.
HTML-
<div class="pics-container">
<a href="https://en.wikipedia.org/wiki/Jason_Bateman">
<img src="pics/Jason.jpg" alt="Jason Bateman" class="image" border="2px";>
</a><div class="middle"><div class="name">Jason Bateman</div></div>
<div class="pics-container">
<a href="https://en.wikipedia.org/wiki/Rachel_McAdams">
<img src="pics/Rachel.jpg" alt="Rachel McAdams" class="image" border="2px";>
</a><div class="middle"><div class="name">Rachel McAdams</div></div>
CSS-
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 38%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.pics-container {
position: relative;
display: flex;
width: 50%;
padding: 20px;
}
.pics-container:hover .image {
opacity: 0.3;
}
.pics-container:hover .middle {
opacity: 1;
}
.name {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
This is from me researching and trying to put the codes together. Also, after adding padding the images are now stair-stepped instead of being lined up.
Is this what u want?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<style>
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.img_hover:hover .image {
opacity: 0.3;
}
.img_hover:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<br><br>
<div class="container">
<div class="row">
<div class="col-sm img_hover">
<img src="your_image" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
<div class="col-sm img_hover">
<img src="your_image" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
<div class="col-sm img_hover">
<img src="your_image" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">John Doe</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add anchor tag outside of name like this
<div class="text">John Doe</div>
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;
}