<div class ="tc-container">
<img src ="2.jpg" alt=""/>
<img style ="margin-top:342px;margin-left: 52px;"class ="top-img" src="3.jpg" alt=""/>
</div>
**CSS:**
/*image hover*/
.tc-container{
width:500px;
height:800px;
padding-right: 1800px;
}
.tc-container img{
width: 700px;
height: 500px;
}
.top-img{
position:absolute;
left:0;
top:0;
opacity: 0;
transition:all 0.7s ease;
}
.top-img:hover{
opacity:1;
}
I want to hover 1 image and can slide it into 4-5 images. That's what I am trying to do thank you for answering my question
Something like this you mean?
.tc-container {
position: relative;
height: 100px;
width: 100px;
--horizontal-spacing: 105px;
}
.tc-container img {
position: absolute;
left: 0;
top: 0;
z-index: -1;
transition: left 0.2s ease-in;
}
.tc-container:hover #img1 {
left: calc(3 * var(--horizontal-spacing));
}
.tc-container:hover #img2 {
left: calc(2 * var(--horizontal-spacing));
}
.tc-container:hover #img3 {
left: calc(1 * var(--horizontal-spacing));
}
<div class="tc-container">
<img id="img1" class="img" src="https://picsum.photos/id/1022/100">
<img id="img2" class="img" src="https://picsum.photos/id/1012/100">
<img id="img3" class="img" src="https://picsum.photos/id/1015/100">
<img id="img4" class="img" src="https://picsum.photos/id/102/100">
</div>
Related
I try to make an animation of an image from width 0% to 100%.
But there is a movement difference when I set the css style of an image in html.
If the image stye is set "width:100%" in html, the animation movement starting from top right corner.
If the image stye is not set, the animation movement starting from right to left.
What I need is set the image as width:100% in html and the animation movement from right to left.
Here is the demo link to
codepen : demo sample
.showVideoImage{
position: absolute;
width: 0%;
left: 100%;
transition: 0.5s;
}
.showVideoImage2{
position: absolute;
width: 0%;
left: 100%;
transition: 0.5s;
}
div.product-box:hover .showVideoImage
{
left: 0%;
width: 100%;
}
div.product-box2:hover .showVideoImage2
{
left: 0%;
width: 100%;
}
<div class="product-box">
<h2>hover me test1</h2>
<div class="showVideoImage" >
<img src="https://data.photo-ac.com/data/thumbnails/34/346a378b2e5b1bc0d8d999c811f8e6aa_w.jpeg" style="width:100%"/>
</div>
</div>
<div class="product-box2">
<h2>hover me test2</h2>
<div class="showVideoImage2" >
<img src="https://data.photo-ac.com/data/thumbnails/34/346a378b2e5b1bc0d8d999c811f8e6aa_w.jpeg" />
</div>
</div>
You need to set the width of the img itself not the parent tag.
.showVideoImage{
position: absolute;
left: 100%;
opacity:0;
transition: 1s;
}
div.product-box:hover > .showVideoImage
{
left: 0%;
opacity:1;
}
div.product-box:hover img
{
width:750px;
}
img{
width:0px;
}
<div class="product-box">
<h2>hover me test1</h2>
<div class="showVideoImage" >
<img src="https://data.photo-ac.com/data/thumbnails/34/346a378b2e5b1bc0d8d999c811f8e6aa_w.jpeg"/>
</div>
</div>
You can just remove with:0, the image already in-visible and all you have to do is to change left CSS attribute value:
.showVideoImage{
position: absolute;
width: 100%;
left: 100%;
transition: 0.5s;
}
.showVideoImage2{
position: absolute;
width: 100%;
left: 100%;
transition: 0.5s;
}
div.product-box:hover .showVideoImage
{
left: 0%;
}
div.product-box2:hover .showVideoImage2
{
left: 0%;
}
<div class="product-box">
<h2>hover me test1</h2>
<div class="showVideoImage" >
<img src="https://data.photo-ac.com/data/thumbnails/34/346a378b2e5b1bc0d8d999c811f8e6aa_w.jpeg" style="width:100%"/>
</div>
</div>
<div class="product-box2">
<h2>hover me test2</h2>
<div class="showVideoImage2" >
<img src="https://data.photo-ac.com/data/thumbnails/34/346a378b2e5b1bc0d8d999c811f8e6aa_w.jpeg" />
</div>
</div>
I'm trying to make an image gallery scale properly to the rest of my website but whenever it scales down, it leaves a blank space at where the gallery image would have been.
<div style="position: relative;
background-repeat: no-repeat;
background-color: black;
height:100%;">
<div class="slider" id="main-slider">
<div class="slider-wrapper">
<img style="height:auto;width:100%;" src="style/slides/img1" alt="First" class="slide"/>
<img style="height:auto;width:100%;" src="style/slides/img2" alt="Second" class="slide"/>
<img style="height:auto;width:100%;" src="style/slides/img3" alt="Third" class="slide"/>
<img style="height:auto;width:100%;" src="style/slides/img4" alt="Fourth" class="slide"/>
<img style="height:auto;width:100%;" src="style/slides/img5" alt="Last" class="slide"/>
</div>
</div>
</div>
The CSS:
.slider {
height: auto;width:100%;
margin: 2em auto;
position:absolute;
}
.slider-wrapper {
height: auto;width:100%;
position: absolute;
}
.slide {
position: absolute;
height: auto;width:100%;
opacity: 0;
transition: opacity 6s linear;
}
.slider-wrapper > .slide:first-child {
opacity: 1;
}
All images are 1920x1080
I making a new website for my company and making my own slider. The slider works but the images aren't displaying properly:
Is there a way to fix this easily?
the source code: (most of the code is repeated for each image)
<!doctype html>
<html>
<head>
<link href="style_sheet.css" rel="stylesheet" title="style sheet" type="text/css" />
</head>
<body>
<div>
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<span id="slider-image-4"></span>
<span id="slider-image-5"></span>
<span id="slider-image-6"></span>
<span id="slider-image-7"></span>
<span id="slider-image-8"></span>
<span id="slider-image-9"></span>
<div class="image-holder">
<img src="../bee colouring page.jpg" class="slider-image" />
<img src="../lol/Front cover.jpg" class="slider-image" />
<img src="../lol/Ida front cover.jpg" class="slider-image" />
<img src="../lol/ida.jpg" class="slider-image" />
<img src="../lol/IMG_4305.JPG" class="slider-image" />
<img src="../lol/IMG_4464[1].JPG" class="slider-image" />
<img src="../lol/IMG_4465[1].JPG" class="slider-image" />
<img src="../lol/IMG_4466[1].JPG" class="slider-image" />
<img src="../lol/ltb team.JPG" class="slider-image" />
</div>
<div class="button-holder">
</div>
</div>
</body>
</html>
style sheet:
#charset "utf-8";
/* CSS Document */
.slider-holder
{
width: 800px;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-holder
{
width: 2400px;
background-color: red;
height: 400px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slider-image
{
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slider-image-1:target ~ .image-holder
{
left: 0px;
}
#slider-image-2:target ~ .image-holder
{
left: -800px;
}
#slider-image-3:target ~ .image-holder
{
left: -1600px;
}
#slider-image-4:target ~ .image-holder
{
left: -2400px;
}
#slider-image-5:target ~ .image-holder
{
left: -3200px;
}
#slider-image-6:target ~ .image-holder
{
left: -4000px;
}
#slider-image-7:target ~ .image-holder
{
left: -4800px;
}
#slider-image-8:target ~ .image-holder
{
left: -5600px;
}
#slider-image-9:target ~ .image-holder
{
left: -6400px;
}
.button-holder
{
position: relative;
top: -20px;
}
.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}
I would just like to know how to get the images in the right place, hidden from the page until the slider gets to them.
If it is easier and someone could supply a working code rather than fixing this code it would be much appreciated.
try adding this code to the main div, it works better with 800x400 images:
<div class="slider-holder">
I have a little problem that i can't resolve, cause i want use solo CSS. I just want to do the opposite of what my code does, but i couldn't found the way to do it. That's my code:
HTML:
<div class="central1">
<div id="central_imgl">
<img class="bottom" src="images/kostnic_central1.jpg" width="370px" height="400px"/>
<img class="top1 hover" src="images/kostnic.jpg" width="370px" height="400px"/>
</div>
<div id="central_imgr">
<img class="bottom" src="images/kostnic_central2.jpg" width="370px" height="400px"/>
<img class="top1 hover" src="images/kdata2.jpg"/>
</div>
</div>
CSS:
div.central1{
background: black;
display: block;
position: absolute;
width: 740px;
height: 400px;
top:190px;
left:350px;
color: white;
}
#central_imgl {
position:relative;
float: left;
width: 50%;
height: 100%;
margin:0 auto;
}
#central_imgl img {
position:absolute;
left:0;
width: 368px;
height: 400px;
-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;
}
#central_imgl img.top1:hover {
opacity:0;
}
(And the same for central_imgr with float:right)
Now I want to change the displayed img on 'central_imgr' when i hover central_imgl, keeping the frontal img of central_imgl, and vice versa.
Thanks all!
DEMO
css code:
*{
box-sizing:border-box;
}
div.central1{
background: black;
display: block;
position: absolute;
width: 740px;
height: 400px;
top:190px;
left:350px;
color: white;
border:4px solid black;
overflow:hidden;
}
[id^=central] {
position:relative;
float: left;
width: 50%;
height: 100%;
}
[id=hiddenDiv]{
position:absolute;
right: 0;
width: 50%;
height: 100%;
z-index:1;
}
img {
position:absolute;
left:0;
top:0;
width: 100%;
height: 400px;
transition: opacity 1s ease-in-out;
}
#central_imgl .top1:hover {
opacity:0;
}
#central_imgl:hover + [id=central_imgr] .hover{
opacity:0;
}
[id=hiddenDiv]:hover + #central_imgl .top1{
opacity:0;
}
html code:
<div class=central1>
<div id=hiddenDiv></div>
<div id="central_imgl">
<img class=bottom src="https://scontent-b-fra.xx.fbcdn.net/hphotos-frc3/l/t1.0-9/1604926_659171170797962_1284145215_n.jpg" width="370px" height="400px"/>
<img class="top1 hover" src="https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10154320_659171017464644_1223781208_n.jpg" width="370px" height="400px"/>
</div>
<div id=central_imgr>
<img class=bottom src="https://scontent-b-fra.xx.fbcdn.net/hphotos-prn2/t1.0-9/1234076_659170960797983_1698005470_n.jpg" width="370px" height="400px"/>
<img class="top1 hover" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/t1.0-9/10156133_658968587484887_710971290_n.jpg"/>
</div>
</div>
i m using a hover effect to change the images.when i hover on the first image it shows the another image which hasfew names which i want to link but coz this image is not visible in dreamweaver so i m unable to map it.
Here is the CSS for this:
div#content .promo{
display:block;
position:relative;
width:170px;
height:170px;
/* border:1px solid #f00;*/
float:left;
margin:10px;
/* border-radius:100px;*/
}
#content .promo .mask {
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 1.0;
position: absolute;
transition: opacity 0.45s ease-in 0s;
z-index: 1;
background-color:#FFFFFF;
/* border-radius:100px;*/
}
#content .promo:hover .mask {
opacity: 0;
filter:alpha(opacity=0);
}
Here is the code for image in div:
<div id="content">
<div class="promo">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/Circles-back-01.png" />
<div class="mask">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/style.png"/>
</div>
</div>
</div>
There you go...
HTML
<div class="map">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/Circles-back-01.png" alt="Pearl" />
</div>
CSS
.map {position: relative;}
.link {position: absolute; width: 150px; height: 40px;}
.link.link1 {top: 20px; left: 10px;}
.link.link2 {top: 60px; left: 10px;}
.link.link3 {top: 100px; left: 10px; height: 50px;}
Fiddle: http://jsfiddle.net/praveenscience/6uwRP/
Do you want something like this?
HTML
<div class="promo">
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/Circles-back-01.png" />
<img src="http://pearlacademy.com/wp-content/uploads/2013/02/style.png" class="hover" />
</div>
CSS
.promo img.hover,
.promo:hover img {display: none;}
.promo:hover img.hover {display: inline;}
Fiddle: http://jsfiddle.net/praveenscience/dYExh/