I have tried z-index on input but its not working how can I fix that and please check this my other other question put my mistakes up
Why when radio button is checked the images are not sliding out of out of container?
please resolve my confusion
body {
font-family: sans-serif;
}
.img-container {
width: 1550px;
border: 4px solid black;
padding: 6px;
}
.crousel {
width: 516px;
border: 6px solid magenta;
height: 350px;
display: flex;
}
img {
padding: 6px;
}
.toggle-button {
display: none;
}
.box {
transition-duration: 1s;
transition-property: transform;
transition-timing-function: ease-in-out;
}
.toggle-button:nth-child(1):checked ~ .box:nth-child(1) {
transform: translateX(0);
}
.toggle-button:nth-child(2):checked ~ .box:nth-child(2) {
transform: translateX(-100%);
}
.toggle-button:nth-child(2):checked ~ .box:nth-child(2){
transform: translateX(-200%);
}
input {
z-index: 100;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./src/styles.css" />
</head>
<body>
<div class="img-container">
<div class="crousel">
<input type="radio" name="button" id="toggle1" class="toggle-button" />
<input type="radio" name="button" id="toggle2" class="toggle-button" />
<input type="radio" name="button" id="toggle3" class="toggle-button" />
<img
src="https://cdn.pixabay.com/photo/2020/10/06/11/50/dog-5632005__340.jpg"
alt=""
class="box"
/>
<img
src="https://cdn.pixabay.com/photo/2020/09/12/09/26/gorilla-5565295__340.jpg"
alt=""
class="box"
/>
<img
src="https://cdn.pixabay.com/photo/2020/09/14/17/19/beach-5571545__340.jpg"
alt=""
class="box"
/>
</div>
</div>
<div class="buttons">
<label for="toggle1">1</label>
<label for="toggle2">2</label>
<label for="toggle3">3</label>
</div>
</body>
</html>
uhh I dont know what you are trying to make but i made it work. For some reason nth-child(1) was not working for box so i gave it box-1 box-2 box-3 classes and now it is working. lmk if it helped you
.toggle-button:nth-child(1):checked ~ .box-1 {
transform: translateX(0);
}
.toggle-button:nth-child(2):checked ~ .box-2 {
transform: translateX(-100%);
}
.toggle-button:nth-child(2):checked ~ .box-3{
transform: translateX(-200%);
}
<img src="https://cdn.pixabay.com/photo/2020/10/06/11/50/dog-5632005__340.jpg" alt="" class="box box-1"/>
<img src="https://cdn.pixabay.com/photo/2020/09/12/09/26/gorilla-5565295__340.jpg" alt="" class="box box-2"/>
<img src="https://cdn.pixabay.com/photo/2020/09/14/17/19/beach-5571545__340.jpg" alt="" class="box box-3"/>
You have set display property of your toggle-button to none. Simply replace the none with block
.toggle-button {
display: block;
}
Related
I'm trying to make the paragraph texts appear when I hover over each of the images. The text should be in the center of the image. I'm not entirely sure how I can achieve this.
Another issue I have is that if I set top: 0 and remove the transform, the text isn't actually positioned at top: 0, there is some margin between the top and where the text is.
Codepen below:
https://codepen.io/uhzyrneh/pen/WNvOaWB
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(4, 25%);
background-color: black;
}
.container div {
position: relative;
width: 100%;
overflow: hidden;
}
.container div img {
width: 100%;
transition: 0.4s;
transform: scale(1.1);
opacity: 0.7;
}
.container div img:hover {
transform: scale(1.03);
opacity: 1;
}
.container div p {
color: white;
position: absolute;
top: 0;
left: 50%;
font-size: 50px;
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="">
<img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
<p>Test</p>
</div>
<div class="">
<img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
<p>Test2</p>
</div>
<div class="">
<img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
</div>
</body>
</html>
The rule you're looking for is:
.container div:hover p {
display: inline;
}
And hide the text to begin with by adding display: none; to .container div p.
Also, the text is at the top of the div. If you highlight it, you can see it's right up against the top.
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(4, 25%);
background-color: black;
}
.container div {
position: relative;
width: 100%;
overflow: hidden;
}
.container div img {
width: 100%;
transition: 0.4s;
transform: scale(1.1);
opacity: 0.7;
}
.container div img:hover {
transform: scale(1.03);
opacity: 1;
}
.container div p {
color: white;
position: absolute;
top: 0;
left: 50%;
font-size: 50px;
opacity: 1;
display: none;
}
.container div:hover p {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="">
<img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
<p>Test</p>
</div>
<div class="">
<img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
<p>Test2</p>
</div>
<div class="">
<img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
</div>
</body>
</html>
You could use like this:
* {
padding: 0;
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(4, 25%);
background-color: black;
}
.container div {
position: relative;
width: 100%;
overflow: hidden;
}
.container div img {
width: 100%;
transition: 0.4s;
transform: scale(1.1);
opacity: 0.7;
}
.container div img:hover {
transform: scale(1.03);
opacity: 1;
}
.container div p {
color: #fff;
position: absolute;
top: 0;
left: 50%;
font-size: 50px;
opacity: 1;
}
.container div a:hover::after{
content: attr(title);
display:block;
position:absolute;
width:100%;
height:200px;
top:50px;
left:0;
z-index:1;
opacity: 1;
font-size: 50px;
color:#fff;
text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="">
<img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic5" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic6" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
<div class="">
<img id="pic7" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
</div>
<div class="">
<img id="pic8" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
</div>
</div>
</body>
</html>
I am coding a simple landing page. In theory, each div you code will show below the previous one and so forth.
I made a little navbar and then expected the slider to appear below it. Then, I wanted to add an image below the slider (the one with brands' logos). Problem is, the image appears below the navbar. I am guessing there is something with the position of the slider but I can't figure out what it is.
I'd rather not use position: absolute or position: relative to position all my elements, so I am here to understand what the problem might be.
html {
font-family: "Arial", Helvetica, sans-serif;
}
/*---navigation--*/
.top-nav {
height: 105px;
display: flex;
align-items: center;
}
ul.main-nav {
display: flex;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
height: 40px;
}
ul.main-nav li {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;
font-weight: 700;
color: #FCAF17;
}
ul.main-nav li:hover {
cursor: pointer;
color: #FFFFFF;
}
/* main slider */
.slider {
width: 100%;
height: 100%;
left: 0;
top: 25%;
opacity: 1;
z-index: 0;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-flow: row wrap;
-webkit-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
align-content: center;
-webkit-transition: -webkit-transform 1600ms;
transition: -webkit-transform 1600ms, transform 1600ms;
-webkit-transform: scale(1);
transform: scale(1);
}
/* image slider position */
.slide1 {
position: absolute;
left: 0;
}
.slide2 {
position: absolute;
left: 100%;
}
.slide3 {
position: absolute;
left: 200%;
}
/* slider pagination */
.slider-pagination {
position: absolute;
bottom: 20px;
width: 100%;
left: 0;
text-align: center;
z-index: 1000;
}
.slider-pagination label {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background: rgba(255, 255, 255, 0.2);
margin: 0 2px;
border: solid 1px rgba(255, 255, 255, 0.4);
cursor: pointer;
}
/* slider control */
input {
visibility: hidden;
}
.slide-radio1:checked~.slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.slide-radio2:checked~.slider {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide-radio3:checked~.slider {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
/*----------slider end----------------*/
.box {
background-color: blue;
}
<!--navigation-->
<div class="top-nav">
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/logo.jpg"></img>
</div>
<ul class="main-nav">
<li>HOMBRE</li>
<li>MUJER</li>
<li>NIÑOS</li>
<li>Carrito</li>
</ul>
<!--image slider-->
<div class="css-slider-wrapper">
<input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
<input type="radio" name="slider" class="slide-radio2" id="slider_2">
<input type="radio" name="slider" class="slide-radio3" id="slider_3">
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
</div>
<div class="slider slide1">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
<div class="slider slide2">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/evoACCURACY_980x400px.jpg">
</div>
</div>
<div class="slider slide3">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
</div>
<div class="brands">
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/marcas.jpg">
</div>
Live demo
first thing you can add Position : relative and second add height to div like i added <div class="demo" style="opacity:0;"> <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg"> </div>
<div class="css-slider-wrapper">
<div class="demo" style="opacity:0;"> <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg"> </div>
<input name="slider" class="slide-radio1" checked="" id="slider_1" type="radio">
<input name="slider" class="slide-radio2" id="slider_2" type="radio">
<input name="slider" class="slide-radio3" id="slider_3" type="radio">
<div class="slider-pagination">
<label for="slider_1" class="page1"></label>
<label for="slider_2" class="page2"></label>
<label for="slider_3" class="page3"></label>
</div>
<div class="slider slide1">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
<div class="slider slide2">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/evoACCURACY_980x400px.jpg">
</div>
</div>
<div class="slider slide3">
<div>
<img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
</div>
</div>
</div>
use style :
.css-slider-wrapper {
position: relative;
}
.slide1 {
left: 0;
}
try it i thing it's work other give me Demo line https://jsfiddle.net/
Since last week I've been creating an HTML site, and I've been using mouse hovering to make image move when your cursor hover on a hyperlink, so everything seems fine and I mostly finished it but there is something that I quite don't understand, I've created 3 hyperlink with 3 mouse hovering images, but the last one actually hovers on the whole page of the site.
I have no idea why or where it does that so that is why I'm here to ask you this question. You can take a look at my html:
.college .image {
margin-left: 100px;
margin-top: 475px;
position: absolute
}
.college .imagesecond {
transform: translate(0px, 500px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.college:hover>.imagesecond {
transform: translate(0, -200px);
}
.lycee .image {
margin-left: 700px;
margin-top: 500px;
position: absolute
}
.lycee .imagefourth {
transform: translate(0px, 300px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.lycee:hover>.imagefourth {
transform: translate(0, -200px);
}
.formations .image {
margin-left: 1250px;
margin-top: 510px;
overflow: hidden;
}
.formations .imagesixth {
transform: translate(0px, 400px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden
}
.formations:hover>.imagesixth {
transform: translate(0, -900px);
}
body {
background: url("http://via.placeholder.com/571x179") 33em 0% fixed no-repeat;
position: fixed;
background-color: rgb(0, 85, 170);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css.css" />
<title> sainte marie </title>
</head>
<body>
<div class="saintemarie">
<a href="college/collegesaintemarie.html">
<div class="college">
<img class="image imagefirst" src="http://via.placeholder.com/196x175" />
<img class="image imagesecond" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="lycee/lyceesaintemarie.html">
<div class="lycee">
<img class="image imagethird" src="http://via.placeholder.com/183x140" />
<img class="image imagefourth" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="c&formation/c&fsaintemarie.html">
<div class="formations">
<img class="image imagefifth" src="http://via.placeholder.com/172x153" />
<img class="image imagesixth" src="http://via.placeholder.com/320x440" />
</div>
</a>
</div>
</body>
</html>
Do you have any ideas that can help me? Or improve my lines of code that I've made so far? Thank you alot!
You need to use left and top rather than margin-left and margin-top. The margins of the images are causing the a tag to expand in size.
.college .image {
left: 100px;
top: 475px;
position: absolute
}
.college .imagesecond {
transform: translate(0px, 500px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.college:hover>.imagesecond {
transform: translate(0, -200px);
}
.lycee .image {
left: 700px;
top: 500px;
position: absolute
}
.lycee .imagefourth {
transform: translate(0px, 300px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.lycee:hover>.imagefourth {
transform: translate(0, -200px);
}
.formations .image {
left: 1250px;
top: 510px;
position:absolute;
overflow: hidden;
}
.formations .imagesixth {
transform: translate(0px, 400px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden
}
.formations:hover>.imagesixth {
transform: translate(0, -200px);
}
body {
background: url("http://via.placeholder.com/571x179") 33em 0% fixed no-repeat;
position: fixed;
background-color: rgb(0, 85, 170);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css.css" />
<title> sainte marie </title>
</head>
<body>
<div class="saintemarie">
<a href="college/collegesaintemarie.html">
<div class="college">
<img class="image imagefirst" src="http://via.placeholder.com/196x175" />
<img class="image imagesecond" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="lycee/lyceesaintemarie.html">
<div class="lycee">
<img class="image imagethird" src="http://via.placeholder.com/183x140" />
<img class="image imagefourth" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="c&formation/c&fsaintemarie.html">
<div class="formations">
<img class="image imagefifth" src="http://via.placeholder.com/172x153" />
<img class="image imagesixth" src="http://via.placeholder.com/320x440" />
</div>
</a>
</div>
</body>
</html>
In the last a you hav closed the opening saintemarie div before closing the a tag see here
<a href="c&formation/c&fsaintemarie.html">
<div class="formations">
<img class="image imagefifth" src="formation.png" />
<img class="image imagesixth" src="pepepls.gif" />
</div>
/* closed before a */ </div>
</a>
Try closing it after the a and see if it gets all right
.college .image {
margin-left: 100px;
margin-top: 475px;
position: absolute
}
.college .imagesecond {
transform: translate(0px, 500px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.college:hover>.imagesecond {
transform: translate(0, -200px);
}
.lycee .image {
margin-left: 700px;
margin-top: 500px;
position: absolute
}
.lycee .imagefourth {
transform: translate(0px, 300px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden;
}
.lycee:hover>.imagefourth {
transform: translate(0, -200px);
}
.formations .image {
margin-left: 1250px;
margin-top: 510px;
overflow: hidden;
}
.formations .imagesixth {
transform: translate(0px, 400px);
transition: transform 0.5s ease-in-out 0.2s;
border-radius: 8px;
overflow: hidden
}
.formations:hover>.imagesixth {
transform: translate(0, -900px);
}
body {
background: url("http://via.placeholder.com/571x179") 33em 0% fixed no-repeat;
position: fixed;
background-color: rgb(0, 85, 170);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css.css" />
<title> sainte marie </title>
</head>
<body>
<div class="saintemarie">
<a href="college/collegesaintemarie.html">
<div class="college">
<img class="image imagefirst" src="http://via.placeholder.com/196x175" />
<img class="image imagesecond" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="lycee/lyceesaintemarie.html">
<div class="lycee">
<img class="image imagethird" src="http://via.placeholder.com/183x140" />
<img class="image imagefourth" src="http://via.placeholder.com/320x440" />
</div>
</a>
<a href="c&formation/c&fsaintemarie.html">
<div class="formations">
<img class="image imagefifth" src="http://via.placeholder.com/172x153" />
<img class="image imagesixth" src="http://via.placeholder.com/320x440" />
</div>
</a>
</div>
</body>
</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>
So, I found this cool css/html slider on a website, so I downloaded the code, and am going to study it. I've started to edit it and style it to my own needs, and I came upon this problem: when I added an image of a bigger size than the originals, the navigation thumbnails got covered. I want them under the slider.
CSS and HTML
* {
margin: 0;
padding: 0;
}
body {
background: #FFF;
}
.slider {
width: 640px;
position: relative;
padding-top: 320px;
margin: 100px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider>img {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
}
.slider label img {
display: block;
}
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
<div class="slider">
<input type="radio" name="slide_switch" id="id2" checked="checked" />
<label for="id2">
<img src="http://www.placehold.it/100" width="100" />
</label>
<img src="http://www.placehold.it/200X800" />
<input type="radio" name="slide_switch" id="id3" />
<label for="id3">
<img src="http://www.placehold.it/100/FF0000" width="100" />
</label>
<img src="http://www.placehold.it/640X320/FF0000" />
<input type="radio" name="slide_switch" id="id4" />
<label for="id4">
<img src="http://www.placehold.it/100/FF9900" width="100" />
</label>
<img src="http://www.placehold.it/640X320/FF9900" />
<input type="radio" name="slide_switch" id="id5" />
<label for="id5">
<img src="http://www.placehold.it/100/FFFF99" width="100" />
</label>
<img src="http://www.placehold.it/640X320/FFFF99" />
</div>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
Start by restricting the width and height of the img to its container:
.slider > img {
max-width: 100%;
max-height: 100%;
}
Now, let's centre the image, this will look a lot better for images that don't span the width of the container:
.slider > img gets left: 50% and transform: translateX(-50%) (placed next to the existing scale transform).
Working Example
* {
margin: 0;
padding: 0;
}
body {
background: #FFF;
}
.slider {
width: 640px;
position: relative;
padding-top: 320px;
margin: 100px auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
.slider>img {
position: absolute;
left: 50%;
top: 0;
max-width: 100%;
max-height: 100%;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
}
.slider label img {
display: block;
}
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1) translateX(-50%);
}
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1) translateX(-50%);
}
<div class="slider">
<input type="radio" name="slide_switch" id="id2" checked="checked" />
<label for="id2">
<img src="http://www.placehold.it/100" width="100" />
</label>
<img src="http://www.placehold.it/640X320" />
<input type="radio" name="slide_switch" id="id3" />
<label for="id3">
<img src="http://www.placehold.it/100/FF0000" width="100" />
</label>
<img src="http://www.placehold.it/1000X1000/FF0000" />
<input type="radio" name="slide_switch" id="id4" />
<label for="id4">
<img src="http://www.placehold.it/100/FF9900" width="100" />
</label>
<img src="http://www.placehold.it/640X320/FF9900" />
<input type="radio" name="slide_switch" id="id5" />
<label for="id5">
<img src="http://www.placehold.it/100/FFFF99" width="100" />
</label>
<img src="http://www.placehold.it/640X320/FFFF99" />
</div>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
You can give a max-width and a max-height to your images so that they always fit in the container without stretching.
.slider>img {
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
/* ADD THESE LINES */
max-width: 100%;
max-height: 100%;
}