I have created a grid of images with a hover effect. When you hover over the images it zooms in. It is working fine on safari but when I try it out on google chrome the images disappear when you hover over them instead of the zoom effect. I have provided my code below.
HTML :
<body>
<div class="message0">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />
Wakeup And Makeup <img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />
</div>
<div class="masonry">
<div class="fader0">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_113634307.jpg?3027373344113436523" />
</div>
</div>
<div class="my-wrapper">
<div class="item">
<a href="https://vipera-nyc.myshopify.com/collections/eyeshadow"><img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Vipera_cae46bcd-7bd4-4ed6-ab7d-5970f5d6fa44.jpg?5440451544572147338" /></a>
</div>
</div>
<div class="fader1">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_313764047.jpg?453596164489734443" />
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/HelloG-5.jpg?7272790211589801407" />
</div>
<div class="fader">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/EYEScool.jpg?3027373344113436523" />
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_91130072.jpg?3027373344113436523" />
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Makeup-2.jpg?7468684895134417704" />
</div>
<div class="my-wrapper">
<div class="item">
<a href="https://twitter.com/ViperaNYC"><img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Tweet_us_your_look.jpg?453596164489734443" /></a>
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/glosssssss_5c5c5520-ea20-4c78-8830-e633e5bb1083.jpg?1992342090983963689" />
</div>
<div class="item">
<div class="my-wrapper">
<a
href="https://vipera-nyc.myshopify.com/collections/best-selling-products">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Best_Selling_Products-3.jpg?887070778965157300" />
</a>
</div>
</div>
</div>
</body>
CSS:
.item img { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.itemkat img {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width:100%;
}
.grid {
column-count: 3;
-webkit-column-gap: -10px; /* Chrome, Safari, Opera */
-moz-column-gap: -10px; /* Firefox */
column-gap: -10px;
line-height:100%;
}
.grid-item{
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.message0
{
display:center;
font-size:30px;
}
.my-wrapper {
background-color: #f2f2f2;
}
.my-wrapper:hover img {
opacity:0.2;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
/* margin: 0%; /*makes left margin closer */
overflow: hidden;
width: 470px;
}
.item img {
max-width: 100%; /*reduces space between images */
overflow: hidden;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
overflow: hidden;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.message0 {
font-family: Brush Script MT ;
font-size:120px;
text-align:center;
color:black;
letter-spacing: 5px;
}
I have provided a fiddle. ***IT WORKS ON OTHER INTERNET BROWSERS BUT NOT GOOGLE CHROME WHICH IS THE PROBLEM****
https://jsfiddle.net/getMecoffee56/o11hmwek/1/
Related
I am trying to use overflow, but its not allowing me to scroll but it works as I need that popup on hover, is there any way so I can use overflow visible as well as scroll.
I tried position fixed too, for the span element inside server__list but it doesn't seems to work as well, rest of the elements going underneath, Is there any other property or a better way for doing this?
Here is my code
:root{
--blurple-color: #7289DA;
--lighter-color: #32363a;
--light-color: #2C2F33;
--white-color: #ffffff;
--dark-color: #23272A;
}
#import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap');
body, html{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
*{
font-family: 'Balsamiq Sans', cursive;
}
body{
background-color: var(--lighter-color);
}
.server__list{
position: fixed;
top: 0;
bottom: 0;
background-color: var(--dark-color);
width: 50px;
overflow-x: visible;
}
.server__list::-webkit-scrollbar {
display: none;
}
.channel__list{
position: fixed;
left: 50px;
width: 150px;
height: 100%;
background-color: var(--light-color);
}
.user__container{
position: fixed;
bottom: 0;
left: 50px;
width: 150px;
height: 40px;
background-color: #26292c;
}
.user__container .profile{
display: flex;
margin: 10px;
}
.user__container .profile img{
width: 25px;
border-radius: 50%;
}
.user .user__name{
color: var(--white-color);
font-size: 10px;
padding: 0px 5px;
}
.user .user__discrim{
color: grey;
font-size: 8px;
padding: 0px 5px;
}
.profile #logout{
background: none;
outline: none;
border: none;
color: rgb(187, 55, 3);
margin-left: 40px;
transition: color;
transition-duration: 0.5s;
}
.profile #logout:hover{
cursor: pointer;
color: darkred;
}
/* Showing Servers */
.server__list .server{
margin: 10px;
}
.server__list .server img{
width: 32px;
border-radius: 50%;
}
.server:hover{
cursor: pointer;
}
.server span{
display: none;
background-color: #0f1011;
color: white;
border-radius: 4px;
font-size: 12px;
padding: 4px;
text-align: center;
}
.server:hover > span{
display: inline-block;
position: absolute;
margin-top: -40px;
width: 100px;
margin-left: 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web</title>
<link rel="icon" href="./static/assets/icon.png" id="header__icon">
<link rel="stylesheet" href="./static/css/style.css">
<script src="https://kit.fontawesome.com/1144a6771a.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="server__list">
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
<div class="server">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<span>Server Name</span>
</div>
</div>
<div class="channel__list">
</div>
<div class="user__container">
<div class="profile">
<img src="https://images-ext-1.discordapp.net/external/3eMPIDjl49YlAuYjS-x42t4ZvBwDJZhq84zKoHNAVls/%3Fsize%3D1024/https/cdn.discordapp.com/avatars/347724952100667394/a_a76024fba4dbe97464128190a5b8cc91.gif?width=300&height=300"
alt="">
<div class="user">
<div class="user__name">
WiperR
</div>
<div class="user__discrim">
#3131
</div>
</div>
<button id="logout"><i class="fa fa-sign-out" aria-hidden="true"></i></button>
</div>
</div>
<script src="./static/js/index.js"></script>
</body>
</html>
Try this css :
.server__list {
overflow-x: auto;
max-height: 100%;
}
I am not sure if this is what you want, but if you want to allow overflow as well as hide the scrollbar, you can use:-
#my-element::-webkit-scrollbar {display: none;}
and
#my-element {overflow: scroll;}
I have been trying to create a simple CSS and HTML only image gallery slider. This is just for practice and it's really bugging me. When I click the arrow and the container slides over, it slides the full page including the navigation and footer to the left, is there any way I can improve this so that only the images slide over? I've tried messing with the overflow etc.
.galleryw {
display: grid;
grid-template-columns: repeat(3, 100%);
scroll-behavior: smooth;
margin-top: 5px;
padding-bottom: 40px
}
.galleryw section {
width: 100%;
position: relative;
display: grid;
transition: transform .2s;
grid-template-columns: repeat(6, auto);
margin: 10px 0;
}
.galleryw section .item {
padding: 0 2px;
transition: 250ms all;
}
.galleryw section .item:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
.galleryw section a {
position: absolute;
color: #000;
text-decoration: none;
font-size: 6em;
width: 40px;
padding: 10px;
text-align: center;
z-index: 1;
}
.galleryw section a:nth-of-type(1) {
top: 0;
bottom: 0;
left: 0;
}
.galleryw section a:nth-of-type(2) {
top: 1;
bottom: 0;
right: 0;
}
<div class="titles"><h2>ANIMALS<span class="red">.</span></h2></div>
<div class="galleryw">
<section id="section1">
‹
<div class="item">
<img src="img/zebs.png" /><br><h3>ZEBRA<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/toitles.png" /><br><h3>TURTLE<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/dolph.png" /> <br><h3>DOLPHIN<span class="red">.</span></h3> </div>
<div class="item">
<img src="img/re.png" /><br><h3>CHAMELEON<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/king.png" /><br><h3>KINGFISHER</h3>
</div>
<div class="item">
<img src="img/arc.png" /><br><h3>SNOWFOX<span class="red">.</span></h3>
</div>
›
</section>
<section id="section2">
‹
<div class="item">
<img src="img/king2.png" /><br><h3>KINGFISHER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/ele2.png" /><br><h3>ELEPHANT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/rac.png" /> <br><h3>RACCOON<span class="red">.</span></h3></div>
<div class="item">
<img src="img/rab.png" /><br><h3>RABBIT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/deer.png" /><br><h3>DEER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/pea.png" /><br><h3>PEACOCK<span class="red">.</span></h3>
</div>
›
</section>
</div>
You can try it here
http://kny.me/practice/gallery.html
Set overflow-x to auto on the gallery.
.galleryw {
display: grid;
grid-template-columns: repeat(3, 100%);
scroll-behavior: smooth;
margin-top: 5px;
padding-bottom: 40px;
overflow-x:auto;
}
.galleryw section {
width: 100%;
position: relative;
display: grid;
transition: transform .2s;
grid-template-columns: repeat(6, auto);
margin: 10px 0;
}
.galleryw section .item {
padding: 0 2px;
transition: 250ms all;
}
.galleryw section .item:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
.galleryw section a {
position: absolute;
color: #000;
text-decoration: none;
font-size: 6em;
width: 40px;
padding: 10px;
text-align: center;
z-index: 1;
}
.galleryw section a:nth-of-type(1) {
top: 0;
bottom: 0;
left: 0;
}
.galleryw section a:nth-of-type(2) {
top: 1;
bottom: 0;
right: 0;
}
<div class="titles"><h2>ANIMALS<span class="red">.</span></h2></div>
<div class="galleryw">
<section id="section1">
‹
<div class="item">
<img src="img/zebs.png" /><br><h3>ZEBRA<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/toitles.png" /><br><h3>TURTLE<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/dolph.png" /> <br><h3>DOLPHIN<span class="red">.</span></h3> </div>
<div class="item">
<img src="img/re.png" /><br><h3>CHAMELEON<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/king.png" /><br><h3>KINGFISHER</h3>
</div>
<div class="item">
<img src="img/arc.png" /><br><h3>SNOWFOX<span class="red">.</span></h3>
</div>
›
</section>
<section id="section2">
‹
<div class="item">
<img src="img/king2.png" /><br><h3>KINGFISHER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/ele2.png" /><br><h3>ELEPHANT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/rac.png" /> <br><h3>RACCOON<span class="red">.</span></h3></div>
<div class="item">
<img src="img/rab.png" /><br><h3>RABBIT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/deer.png" /><br><h3>DEER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/pea.png" /><br><h3>PEACOCK<span class="red">.</span></h3>
</div>
›
</section>
</div>
In order to scroll just the galleryw element and not the whole page you need to add overflow-x: hidden or overflow-x: auto to your galleryw css class.
The vertical jump is due to the implementation of the anchor links which will use the ScrollIntoView js function in order to get the section you want on the screen.
By default, the alignment is to the top-left corner so you need either to re-arrange your html or to use some javascript with some minor html tweaks.
I'm presenting you the second solution since is way faster and doesn't need you to change the whole layout of your page:
function init() {
let galleryw = document.getElementsByClassName("galleryw")[0];
let toSection1 = document.getElementsByClassName("toSection1");
let toSection2 = document.getElementsByClassName("toSection2");
for(const button of toSection1)
button.onclick = () => galleryw.scrollBy(-galleryw.offsetWidth, 0);
for(const button of toSection2)
button.onclick = () => galleryw.scrollBy(galleryw.offsetWidth, 0);
}
.galleryw {
overflow-x: hidden; /* ADDED */
display: grid;
grid-template-columns: repeat(3, 100%);
scroll-behavior: smooth;
margin-top: 5px;
padding-bottom: 40px
}
.galleryw section {
width: 100%;
position: relative;
display: grid;
transition: transform .2s;
grid-template-columns: repeat(6, auto);
margin: 10px 0;
}
.galleryw section .item {
padding: 0 2px;
transition: 250ms all;
}
.galleryw section .item:hover {
-ms-transform: scale(1.5); /* IE 9 */
-webkit-transform: scale(1.5); /* Safari 3-8 */
transform: scale(1.5);
}
.galleryw section a {
position: absolute;
color: #000;
text-decoration: none;
font-size: 6em;
width: 40px;
padding: 10px;
text-align: center;
z-index: 1;
}
.galleryw section a:nth-of-type(1) {
top: 0;
bottom: 0;
left: 0;
}
.galleryw section a:nth-of-type(2) {
top: 1;
bottom: 0;
right: 0;
}
.toSection1,
.toSection2 {
cursor:pointer;/* ADDED */
}
<body onload = "init()">
<div class="titles"><h2>ANIMALS<span class="red">.</span></h2></div>
<div class="galleryw">
<section id="section1">
<a class="toSection2">‹</a><!-- Changed -->
<div class="item">
<img src="img/zebs.png" /><br><h3>ZEBRA<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/toitles.png" /><br><h3>TURTLE<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/dolph.png" /> <br><h3>DOLPHIN<span class="red">.</span></h3> </div>
<div class="item">
<img src="img/re.png" /><br><h3>CHAMELEON<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/king.png" /><br><h3>KINGFISHER</h3>
</div>
<div class="item">
<img src="img/arc.png" /><br><h3>SNOWFOX<span class="red">.</span></h3>
</div>
<a class="toSection2">›</a><!-- Changed -->
</section>
<section id="section2">
<a class="toSection1">‹</a><!-- Changed -->
<div class="item">
<img src="img/king2.png" /><br><h3>KINGFISHER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/ele2.png" /><br><h3>ELEPHANT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/rac.png" /> <br><h3>RACCOON<span class="red">.</span></h3></div>
<div class="item">
<img src="img/rab.png" /><br><h3>RABBIT<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/deer.png" /><br><h3>DEER<span class="red">.</span></h3>
</div>
<div class="item">
<img src="img/pea.png" /><br><h3>PEACOCK<span class="red">.</span></h3>
</div>
<a class="toSection1">›</a> <!-- Changed -->
</section>
</div>
</body>
I've just added the init function which get called onload and changed the anchors to normal <a> tags with a class = "toSection..." to recognize them.
The init function uses the scrollBy function on the galleryw so that when our "anchors" get clicked they just scroll the container and not the whole page.
I seem to be having some issues having problems aligning three images to the centre at once, i have the float: left property but when removing that, the images stack on top of each other on the left side of the page. As you could probably tell from the code I was only worried about circle and column and not column2 and circle2 as I was using the first row to see if I could get the correct result and then apply it to the second row as well.
UPDATE:
ISSUE WAS FIXED.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
figure {
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 2%;
}
.rowfirst {
flex: 1 1 25%;
margin: 20px 10px;
width: 20.00%;
padding: 6px;
image-orientation: from-image;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
border-radius: 2%;
pointer-events: none;
}
.rowsecond {
flex: 1 1 25%;
margin: 20px 10px;
width: 20.00%;
padding: 6px;
image-orientation: from-image;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
border-radius: 2%;
pointer-events: none;
}
.rowfirst:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
.rowsecond:hover {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
/* Clearfix (clear floats) */
.container {
content: "";
clear: both;
image-orientation: from-image;
padding: 60px;
display: flex;
flex-wrap: flex-start;
}
<h1>Portfolio</h1>
</head>
<div class="container">
<div class="rowfirst">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%" filter:="FlipH"></figure>
</div>
<div class="rowfirst">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="rowfirst">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="container">
<div class="rowsecond">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="rowsecond">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="rowsecond">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
<div class="rowsecond">
<figure><img src="../photos/exp.jpg" alt="." style="width:100%"></figure>
</div>
</div>
</div>
</body>
</html>
Adam.
You can use the code below, as your case is related to images inside a container block:
.circle {
margin: 2%;
image-orientation: from-image;
text-align:center;
}
In case you wish to align images as inline elements, you should use the properties below:
display: block;
margin: 0 auto;
As you commented that the solution above did not work, I suggest that you use it with flex-box approach - With flex-box, you will have images centralized in the middle of the rows (and page). The rows will also be responsive. Try the code below:
<!DOCTYPE html>
<html>
<style>
.item {
flex: 1 1 25%;
margin: 20px 10px;
text-align: center;
}
.container {
padding: 60px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
</style>
<head>
<title>Page Title</title>
</head>
<body>
<div class="container">
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
<div class="item">
<img src="../photos/example.jpg" alt="image for testing">
</div>
</div>
</body>
</html>
Cheers
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 trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
I am trying to make a gallery, the links show up from the bottom on
hover. I am having trouble regarding hiding them when they are not on hover.
.imageWrapper {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
padding: 0px;
margin: 0px;
}
.imageWrapper img {
display: block;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
}
.imageWrapper .cornerLink {
height:100px;
width:200px;
opacity: 0.7;
position: absolute;
bottom: 0px;
left: 0px;
margin: 0;
padding: 0;
color: #ffffff;
background-color: cadetblue;
text-decoration: none;
text-align: center;
transform: translateX(0) translateY(100px) translateZ(0);
transition-duration:0.3s;
transition-property: transform;
}
.imageWrapper:hover .cornerLink {
transform: translateX(0) translateY(0) translateZ(0);
}
a{
color: #ffffff;
text-decoration: none;
text-align: center;
}
<body>
<main>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
</main>
</body>
Add overflow:hidden; to your .imageWrapper class. Here's working code:
.imageWrapper {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
padding: 0px;
margin: 0px;
overflow:hidden;
}
.imageWrapper img {
display: block;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
}
.imageWrapper .cornerLink {
height:100px;
width:200px;
opacity: 0.7;
position: absolute;
bottom: 0px;
left: 0px;
margin: 0;
padding: 0;
color: #ffffff;
background-color: cadetblue;
text-decoration: none;
text-align: center;
transform: translateX(0) translateY(100px) translateZ(0);
transition-duration:0.3s;
transition-property: transform;
}
.imageWrapper:hover .cornerLink {
transform: translateX(0) translateY(0) translateZ(0);
}
a{
color: #ffffff;
text-decoration: none;
text-align: center;
}
<body>
<main>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
</main>
</body>
Change this line transform: translateX(0) translateY(100px) translateZ(0); to transform: translateX(0) translateY(115px) translateZ(0);:
Add overflow:hidden to .imageWrapper to remove the space under images
.imageWrapper {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
padding: 0px;
margin: 0px;
overflow: hidden; /* Hides links when off image */
}
.imageWrapper img {
display: block;
width: 200px;
height: 200px;
padding: 0px;
margin: 0px;
}
.imageWrapper .cornerLink {
height: 100px;
width: 200px;
opacity: 0.7;
position: absolute;
bottom: 0px;
left: 0px;
margin: 0;
padding: 0;
color: #ffffff;
background-color: cadetblue;
text-decoration: none;
text-align: center;
transform: translateX(0) translateY(100px) translateZ(0);
transition-duration: 0.3s;
transition-property: transform;
}
.imageWrapper:hover .cornerLink {
transform: translateX(0) translateY(0) translateZ(0);
}
a {
color: #ffffff;
text-decoration: none;
text-align: center;
}
<body>
<main>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
<div class="imageWrapper">
<img src="http://placehold.it/200x200" alt="" />
<div class="cornerLink">
Link
</div>
</div>
</main>
</body>