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">
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 would like to include the mouseover 'Shop Now' effect on my images, I used this code:
<!DOCTYPE html>
<html>
<style>
.container {
style= "width:300px;height:300px;"
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
But when I run it on my site the scroll effect works for all 3 images at the same time. As shown below:
What can I do to solve this problem? I have been told previously that if I change the container size to just fit the image it should work, but how would I do that?
<!DOCTYPE html>
<html>
<style>
.container {
width:300px; /*edited here*/
height:300px;
/*this syntax is for html tags ONLY: style= "width:300px;height:300px;"*/
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
you used the wrong syntax for css. style= "width:300px;height:300px;" would be correct if it was in your html like so:
<div class = "container" style= "width:300px;height:300px;"></div>
but in css the style is already implied throught the tags so in css all you need to do is:
.container{
width:300px;
height:300px;
/*and so on*/
}
note: to avoid future problems learn about chrome's inspect tool. It will help you get a better understanding of your page layout and the size of elements and what not. https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
Few short notes:
U cannot use style= "width:300px;height:300px;" within css. Within your example, your first line should be:
.container {
width:300px;
height:300px;
left:0;
Right:0;
}
You can only use the style-attribute within your html, but it is not nessesairy. If you do this, it will bypass your css:
<div class="container" style="width:300px;height:300px;">
You furthermore don't really have to call width and height both, since an image will scale automatically when it has one of these.
With all this being said, I believe this code solves your problem:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
width: 200px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: green; /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}
</style>
</head>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
</body>
</html>
I'm trying to remove the automatically generated container margin around this image. Below is the code I used to produce it. You can view the website here. I tried to add a margin and padding item to the body element, but it didn't resolve the issue.
.container {
position: relative;
width: 240px;
height: 240px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 0.85;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img src="./img/headshots/Exec_DMoon.jpg" width="240" height="240" alt="Photo of David Moon, Assistant Vice President for Financial Affairs" class="image">
<div class="overlay">
<div class="text"><b>David Moon</b> Assistant Vice President for Financial Affairs, <a class="usa-external_link" target="_blank" href="mailto:davidmoon826#gwmail.gwu.edu">Email</a></div>
</div>
</div>
This is the desired output:
What am I doing wrong?
The easiest fix for this, imo: wrap the items you want in a grid in a div and give the div display: flex and flex-wrap: wrap. Good luck!
Well, just add float: left to .container
(to achieve what you show under "this is the desired output")
The answer from Johannes almost worked, but it caused issues where text would reposition itself into the open gaps (see image below), instead of formatting below all the images.
The solution was to use display: inline-block; in .container, as Adrian recommended.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
height: 50%;
display: inline-block;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 0.8;
}
.text {
color: white;
font-size: 25px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
</body>
</html>
I'm managing the website of my company which is based on Wordpress and I try to figure out how to change my contact page.
I've made a codepen of what I want to do : http://codepen.io/EzhnoFR/pen/PNmdxm
html :
<img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/Isa.png" />
<span>Hover</span>
</div>
<div id="cf">
<img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-chute.png" />
<img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-1.png" />
<span> Hover </span>
</div>
<div id="cf">
<img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile-chute.png" />
<img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile.png" />
<span> Hover </span>
</div>
</div>
css :
#cf img.top {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
#cf img.top:hover {
opacity:0;
}
span{
position: absolute;
bottom: -150px;
left: 0;
z-index: -1;
display: block;
width: 225px;
margin: 0;
padding: 0;
color: black;
font-size: 25px;
text-decoration: none;
text-align: center;
-webkit-transition: .7s ease-in-out;
transition: .7s ease-in-out;
opacity: 0;
}
#cf img.top:hover ~ span{
opacity: 1;
}
/*-----------------------------------------------------*/
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 90px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 50px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
However, when I add this html to my page and the css in my wordpress custom css, it all mess up as you can see : http://www.alabama-pub.com/contact-new-test/
I've tried a lot of things but I can't get to fix it, does anyone has any idea ?
You have extra < br > under image tag which is causing the issue of height changes on hover.
According to other issue please remove z-index from span tag and you are done :)
see
I would like to hover in a.bio change the background .pic to green.
I tried some ways, but it did not work out.
I did not understand the logic of ~ and how even to make it work.
CODE
.executivo .pic::after {
background-color: #00845b;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
transition: .3s ease-in-out;
}
.equipe a.bio:hover ~ .pic::after {
opacity: 0.35;
}
.executivo .pic {
margin-bottom: 45px;
position: relative;
}
.executivo .pic img {
display: block;
}
<div class="executivo">
<div class="pic">
<img src="<?php echo $pic; ?>" alt="<?php echo $nome; ?>" />
</div>
<div class="title">
<h3><?php echo $nome; ?></h3>
</div>
<a class="bio" href="#">Bio+</a>
</div>
Move your a.bio in your HTML, because ~ is a sibling selector (however less strict than the +), and use position to stay as it was before moving the HTML:
Snippet
.executivo .pic::after {
background-color: #00845b;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
transition: .3s ease-in-out;
}
.executivo {
position: relative;
}
.executivo a.bio {
position: absolute;
bottom: -20px
}
.executivo a.bio:hover ~ .pic img {
opacity: 0.35;
}
.executivo .pic {
margin-bottom: 45px;
position: relative;
}
.executivo .pic img {
display: block;
max-width:100% /*demo*/
}
<div class="executivo">
<a class="bio" href="#">Bio+</a>
<div class="pic">
<img src="//lorempixel.com/1600/900" alt="alt text" />
</div>
<div class="title">
<h3>title</h3>
</div>
</div>
Nex element selector is
+
And direct decedent is
>
in css.
Does this help you answer your question?