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
Related
<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>
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 working on my portfolio site now. My projects are listed as clickable images, arranged into two columns. I want it that when a user hovers over an image, a solid block of color covers it with the project title in the center. Basically like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade.
I had it working perfectly when I used row/column css classes, but since I've found that to not be very responsive (on mobile, the first column gets stacked on top of the other, which makes sense but that's not the order I want), I aligned the images with float and padding instead. Now, the hover effect/link stretches across the entire page, instead of being contained in the image area.
Here's my code for reference:
CSS
.container {
position: relative;
}
.image {
display: block;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
height: 100%;
width: 100%;
transition: .5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 30px;
font-family: "Lato-Bold";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
#media screen and (min-width: 1025px) {
.image {
float: left;
width: 45%;
padding-left: 40px;
padding-right: 15px;
padding-bottom: 30px;
}
}
HTML
<div class = "container">
<img src="image name" class = "image">
<div class="overlay" style = "background-color: #color;">
<div class="text">project title</div>
</div>
</div>
How can I fix this? I've tried adding display: block to the .overlay class. I've tried making the .overlay class the same size as the image. I've also tried wrapping the link around the container class instead of the other way around like it is now. Nothing happens at all. I've also tried adjusting the container size, but that shrunk the images and stacked them into 1 column :(
Read about Responsive Images and Flexbox
Try the following code.
Note: I changed the HTML structure slightly.
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.thumb {
position: relative;
width: 50%;
}
.thumb img {
width: 100%;
}
.thumb:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
height: 100%;
width: 100%;
transition: .5s ease;
color: #000;
background: #fff;
}
.overlay .text {
position: absolute;
top: 50%;
transform: translate(-50%);
left: 50%;
text-align: center;
}
<div class="container">
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
</div>
I have a slideshow that I wanted to center, but I can't center it properly, the left part of the image stands exacly in the middle, so the image is not centered, anyone has an idea why?
Here's the following code and images:
CSS
.slider {
width: 100%;
margin: auto;
height:400px;
background-color: rgba(0,0,0,0.1);
}
.slider-wrapper{
width: 100%;
height: 400px;
}
.slide {
position: absolute;
max-width: 100%;
max-height: 400px;
margin:auto;
opacity: 0;
transition: opacity 500ms linear;
}
.slider contains: .slider-wrapper and .slide, .slide is the class I use for each image.
HTML
<div class="slider" id="main-slider">
<div class="slider-wrapper">
<img src="images/eventos/image1.png" class="slide" />
<img src="images/eventos/image2.png" class="slide" />
<img src="images/eventos/image3.png" class="slide" />
<img src="images/eventos/image4.png" class="slide" />
</div>
</div>
This image contains text-align:center and margin: 0 auto
And this one doens't
My code contains jquery so the slideshow works, if needed, please ask so I put it in too.
UPDATE
I discovered the problem, the problem is the position: absolute in those images, I deleted every css and any div I had and left the the .slide and just the images, in .slide I just left position: absolute and it still didn't work, so what can I do?
You can't apply text-align:center alignment on a absolute positioned element. Remove the absolute position and the images should center when using text-align in your wrapper:
.slider {
width: 100%;
margin: auto;
height:400px;
background-color: rgba(0,0,0,0.1);
}
.slider-wrapper{
text-align:center;
width: 100%;
height: 400px;
}
.slide {
width: 100%;
height: 400px;
opacity: 1;
transition: opacity 500ms linear;
border:1px solid black;
}
However, It is unclear from your code whether the absolute position is required. If so, you may need to resort to js calculations.
UPDATE
From OP comment, position absolute is required. Therefore, it is necessary to set the left attribute on slides. If the slide width is known, you could calculate by subtracting half of the viewport width from half of the slide width. For instance, on a 200px wide slide:
left:calc(50vw - 100px);
Assuming slides have variable width, resort to js:
var myElement = document.getElementById('foo');
var width = myElement.offsetWidth;
myElement.style.left = 'calc(50vw - ' + width / 2 + 'px)';
In lieu of finding elements by id, requiring individual ids for each slide, you may want to store all slides in an object array using getElementsByClassName('slide') and retrieving the width according to the slide currently displayed.
If you want to center an element that is set to position: absolute, you need to set the left and right properties to 0. I.e. right: 0 and left: 0. Check out the code below:
.slide {
position: absolute;
max-width: 100%;
max-height: 400px;
width: 200px;
height: 200px;
margin: 0 auto;
left: 0;
right: 0;
/* opacity: 0; */
transition: opacity 500ms linear;
border: 1px solid #000;
}
.slider {
width: 100%;
margin: auto;
height:400px;
background-color: rgba(0,0,0,0.1);
}
.slider-wrapper{
width: 100%;
height: 400px;
}
.slide {
position: absolute;
max-width: 100%;
max-height: 400px;
width: 200px;
height: 200px;
margin: 0 auto;
left: 0;
right: 0;
/* opacity: 0; */
transition: opacity 500ms linear;
border: 1px solid #000;
}
<div class="slider" id="main-slider">
<div class="slider-wrapper">
<img src="images/eventos/image1.png" class="slide" />
<img src="images/eventos/image2.png" class="slide" />
<img src="images/eventos/image3.png" class="slide" />
<img src="images/eventos/image4.png" class="slide" />
</div>
</div>
Maybe try position: fixed; and then top: 50%; left: 50%;
The answer for me was controlling the width of the of the direct children of the class uk-slider-items through uk-child-width-1-3#m as follows:
<div class="uk-container">
<h1 class="uk-heading-line uk-text-center uk-padding-large"><span>Similar Products</span></h1>
<div uk-slider="center: true">
<div class="uk-position-relative uk-visible-toggle uk-light">
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-3#m uk-grid uk-grid-match" >
<li v-for="(pro,index) in category" :key="index">
<div class="uk-card uk-card-default">
<div class="uk-card-media-top">
<img src="/product.jpg" alt="">
</div>
<div class="uk-card-body">
<h3 class="uk-card-title">{{pro.name}}</h3>
<p>{{pro.details}}</p>
</div>
</div>
</li>
</ul>
<a class="uk-position-center-left uk-position-small uk-background-secondary" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-background-secondary" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div>
I have the following html code :
.logo {
display: inline-block;
width: 30px;
position: absolute;
top: 50%;
opacity: 0;
transition: 0.6s;
}
.container:hover .logo {
opacity: 1;
transition: 0.6s;
}
.container:hover .picture {
filter: brightness(0.7);
transition: 0.6s;
}
<div class="container">
<div class="element-header">
<div class="element">Foo</div>
<div class="element">Bar</div>
</div>
<div class="loader"> </div>
<img src="logo.png" alt="" class="logo">
<img src="picture.jpg" alt="" class="picture">
</div>
When .container is hovered, I want .logo to be at opacity:1 and .picture to be at filter: brightness(0.7).
When a try to apply those properties one-by-one at .container hover, each is working. But when both are set-up, only the filter one is working.
If you set the position to relative instead of absolute, both images will display. As the code stood, one image was getting lost. (I substituted my own images in and added a picture class to size the image)
The transition works fine though!
Try below:
.logo {
display: inline-block;
width: 100px;
//height:auto;
position: relative;
top: 50%;
opacity: 0;
transition: 0.6s;
}
.picture {
width: 500px;
height: auto;
float: left;
}
.container:hover .logo {
opacity: 1;
transition: 0.6s;
}
.container:hover .picture {
filter: brightness(0.7);
transition: 0.6s;
}
<div class="container">
<div class="element-header">
<div class="element">Foo</div>
<div class="element">Bar</div>
</div>
<div class="loader"> </div>
<img src="https://www.dcu.ie/sites/default/files/afu_logo2_1.jpg" alt="agefriendly" class="logo">
<img src="http://www.rachelgallen.com/images/mountains.jpg" alt="Mountains" class="picture">
</div>
Fiddle here