Trying to make these pictures align in the center but every time i try to add alignment or margins they wont move, not sure if i added properties that mean it cannot move. I have tried to change the position to fixed on the img but it still wont center, only wany i can find is to manually position it with margins, however that is obviously not ideal.
Any help is greatly appreciated!
Heres the code on JSFiddle to make it a bit easier
https://jsfiddle.net/dzk59p3u/3/
<html>
<head>
</nav>
<div class="box1">
<!-- <h1>W I L D</h1>-->
<div class="cf">
<img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg" alt="sometext" style="width:400px;height:420px" />
</div>
</div>
</div>
<div class="cd">
<img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg" alt="sometext" style="width:400px;height:420px" />
<img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg" alt="sometext" style="width:400px;height:420px" />
</div>
</div>
</div>
CSS
.cf {
position: absolute;
align-items: center;
}
.cf p {
position: absolute;
color: rgb(255, 255, 255);
background-color: rgb(5, 5, 5);
top:100%;
left:50%;
transform:translate(-50%, -50%);
}
.bottom {
float: left;
width: 33.33%;
margin-top: 50px;
margin-left: 50px;
}
.bottom img {
width: 25%;
margin-top: 50px;
margin-left: 50px;
}
.cd img {
display:block;
align-content: center;
position: relative;
float: left;
width: 33.33%;
margin-top: 50px;
margin-left: 50px;
z-index: -1;
}
.cf img {
display:block;
align-content: center;
position: relative;
float: left;
width: 33.33%;
margin-top: 50px;
margin-left: 50px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.cf img.top:hover {
opacity:0;
}
Put your images inside a container, and use display:flex on it. Setting align-items and justify-content to center will vertically and horizontally align the direct children of this container.
Then I'd put an additional container for each of your hover images. Set it to position:relative so its children are positioned relatively to it.
Finally, absolutely position your images inside your hover-container. I'd also use object-fit:cover so they don't stretch but are the same size.
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction:column;
min-height: 100vh;
}
.hover-container {
position: relative;
width: 400px;
height: 270px;
}
img.top,
img.bottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit:cover;
}
img.top {
transition: opacity 1s ease-in-out;
z-index:1;
}
img.top:hover {
opacity: 0;
}
<div class="container">
<div class="hover-container">
<img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg" alt="sometext" />
<img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg" alt="sometext" />
</div>
<div class="hover-container">
<img class="top" src="https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg" alt="sometext" />
<img class="bottom" src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/22130127/Pug-puppy-standing-in-profile-on-a-white-background.jpg" alt="sometext" />
</div>
</div>
Related
I have a container div with a width set to 100%. Inside the container, there is a wrapper div centered with a height of 80%
and a dynamic number of images listed horizontally with inline-block
.wrapper {
width: 100%;
}
.testimg{
height: 100%;
width: 100%;
}
#testDiv{
display: block;
width: 80%;
margin: 0 auto;
overflow-x: auto;
white-space: nowrap;
}
.testimgdiv{
width: 120px;
height: 100px;
display: inline-block;
}
<div id="testDiv">
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
</div>
I want the last image on the left and last image on the right to have a fading effect and not cut like shown in jsfiddle. Sort of like a carousel. Is there a way to do this with just css and html?
Thanks
You could do this with a linear gradient background applied to generated content :before and :after #testDiv
.wrapper {
position: relative;
max-width: 100%;
}
#testDiv {
overflow-x: auto;
white-space: nowrap;
margin: 0 auto;
}
.testimgdiv {
width: 120px;
height: 100px;
display: inline-block;
}
.testimg {
height: 100%;
width: 100%;
}
#testDiv:before,
#testDiv:after {
width: 40px;
height: 100%;
content: '';
position: absolute;
top: 0;
}
#testDiv:before {
left: 0;
background: linear-gradient(-90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}
#testDiv:after {
right: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}
<div class="wrapper">
<div id="testDiv">
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
<div class='testimgdiv'>
<img class="testimg" src="http://via.placeholder.com/100x100" />
</div>
</div>
</div>
I have asked questions regarding this code before. It is working fine. The only issue is that I would like to use it so the it works in the Gmail web client. It seems to work on Gmail mobile but not desktop and normal online HTML works. I know email clients limit CSS functionality but any help in getting functionality like this working would be great.
WORKING SNIPPET:
body {
margin: 0;
padding: 0;
}
.container {
display:flex;
width:600px;
flex-wrap:wrap;
justify-content:space-between;
}
.slider-holder {
order:-1;
width: 600px;
height: 280px;
background-color: yellow;
text-align: center;
overflow: hidden;
}
.image-holder {
width: 3000px;
background-color: red;
height: 280px;
clear: both;
position: relative;
transition: left 7000s; /*Use a big value to block the image change*/
left: 0;
}
.slider-image {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
a[href="#slider-image-0"]:hover~.slider-holder .image-holder {
left: 0.5px; /*Yes it's not 0px here, we need something different from the initial state to be able to trigger the transition (Yes I know it's not intuitive ..)*/
transition: left 1s;
}
a[href="#slider-image-1"]:hover~.slider-holder .image-holder {
left: -600px;
transition: left 1s;
}
a[href="#slider-image-2"]:hover~.slider-holder .image-holder {
left: -1200px;
transition: left 1s;
}
a[href="#slider-image-3"]:hover~.slider-holder .image-holder {
left: -1800px;
transition: left 1s;
}
a[href="#slider-image-4"]:hover~.slider-holder .image-holder {
left: -2400px;
transition: left 1s;
}
.button-holder>a>img {
padding-left: 35px;
padding-right: 35px;
}
<div class="container">
<img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;">
<img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;">
<img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;">
<img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;">
<img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;">
<div class="slider-holder">
<div class="image-holder">
<img src="https://via.placeholder.com/600x280/ff0000" class="slider-image" />
<img src="https://via.placeholder.com/600x280/00ff00" class="slider-image" />
<img src="https://via.placeholder.com/600x280/f0f0f0" class="slider-image" />
<img src="https://via.placeholder.com/600x280/0000ff" class="slider-image" />
<img src="https://via.placeholder.com/600x280" class="slider-image" />
</div>
</div>
</div>
You should use table layout, inline css and avoid using images as replace of content. Here is great guide: https://litmus.com/blog/a-guide-to-css-inlining-in-email
here is the list of CSS supported by email clients link.
Try to add you CSS classes in head section of HTML.
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>
I've got a slider, and it's working great. BUT, I've got one little problem. I want to change the slider image when I hover over one of the <li>s, and not when I click on them.
Is this possible? I've found this link, but maybe there's some new style available already?
.slide {
position: absolute;
display: none;
left: -150;
}
.next {
font-size: 50px;
height: 50px;
line-height: 50px;
position: absolute;
top: calc(50% - 25px);
right: 0;
}
.prev {
font-size: 50px;
height: 50px;
line-height: 50px;
position: absolute;
top: calc(50% - 25px);
}
.slider .slide:target {
transition: 1s;
left: 0;
z-index: 999;
display: block;
}
ul {
padding-top: 250px
}
ul li:hover>a:target {
left: 0;
transition: 1s;
z-index: 9999;
}
<div class='slider'>
<div class='slide' id="slide1" style="display: block;">
<a class="prev" href="#slide4"><</a>
<img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_576006.jpg" width="450" height="150" />
<a class="next" href="#slide2">></a>
</div>
<div class='slide' id="slide2">
<a class="prev" href="#slide1"><</a>
<img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_575498.jpg" width="450" height="150" />
<a class="next" href="#slide3">></a>
</div>
<div class='slide' id="slide3">
<a class="prev" href="#slide1"><</a>
<img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_576753.jpg" width="450" height="150" />
<a class="next" href="#slide4">></a>
</div>
<div class='slide' id="slide4">
<a class="prev" href="#slide3"><</a>
<img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_575922.jpg" width="450" height="150" />
<a class="next" href="#slide1">></a>
</div>
</div>
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
</ul>
Do you need to use :target? Please check out my Fiddle.
.slide
{
position: absolute;
display: none;
left:0;
}
ul
{
padding-top: 50px;
list-style:none;
}
ul li
{
display:inline-block;
}
ul li a
{
position:relative;
top:-50px;
left:0;
}
ul li a:hover + .slide
{
transition: 1s;
z-index: 9999;
display: block;
}
<div class='slider'>
<ul>
<li>
Slide 1
<div class='slide' id="slide1" style="display: block;">
<img src="https://i.picsum.photos/id/591/450/150.jpg" width="450" height="150" />
</div>
</li>
<li>
Slide 2
<div class='slide' id="slide2">
<img src="https://i.picsum.photos/id/402/450/150.jpg" width="450" height="150" />
</div>
</li>
<li>
Slide 3
<div class='slide' id="slide3">
<img src="https://i.picsum.photos/id/1067/450/150.jpg" width="450" height="150" />
</div>
</li>
<li>
Slide 4
<div class='slide' id="slide4">
<img src="https://i.picsum.photos/id/382/450/150.jpg" width="450" height="150" />
</div>
</li>
</ul>
</div>
I removed the next and before buttons for convenience, but it would also be simple to include them again.
The html is given below
.container {
width: 90%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
#cf {
background: green;
position: relative;
height: 360px;
width: 640px;
display:inline-block;
margin: 20px;
}
#cf img {
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
<div class="container">
<div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div>
</div>
The background is properly aligned but the images are offset . What have i done wrong ? Why is the image not being positioned properly?
All the images used are of the dimension 360px height and 640px width.
The images are offset because you are using text-align: center on the container which means that the origin for your positioned child elements is no longer 0 0, but 50% 0 (centre top):
.container {
...
text-align:center;
}
To get around this you just need to override this for the child elements:
#cf {
..
text-align: left;
}
Demo below
.container {
width: 90%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
#cf {
background: green;
position: relative;
height: 360px;
width: 640px;
display:inline-block;
margin: 20px;
text-align: left;
}
#cf img {
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
<div class="container">
<div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div id="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div>
</div>
But your HTML is invalid. IDs must be unique. You should be using a class for your cf element like so...
.container {
width: 90%;
background: #eee;
margin: 10px auto;
position: relative;
text-align:center;
}
.cf {
background: green;
position: relative;
height: 360px;
width: 640px;
display:inline-block;
margin: 20px;
text-align: left;
}
.cf img {
position:absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.cf img.top:hover {
opacity:0;
}
<div class="container">
<div class="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div class="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div class="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div><!--
--><div class="cf">
<img class="bottom" src="http://placehold.it/640x360" />
<img class="top" src="http://placehold.it/640x360" />
</div>
</div>