I have a webpage and a slider inside a picture. Right now the slider moves left and right on its own I want to insert clickable arrow keys that will navigate the user left and right.
<body>
<div id="slider">
<div class="container">
<div class="slide">
<h3>Slide 1</h3>
<p>#</p>
</div>
<div class="slide">
<h3>Slide 2</h3>
<p>#</p>
</div>
<div class="slide">
<h3>Slide 3</h3>
<p>#</p>
</div>
<div class="slide">
<h3>Slide 4</h3>
<p>#</p>
</div>
<div class="slide">
<h3>Slide 5</h3>
<p>#</p>
</div>
</div>
</div>
</body>
and this is the CSS
#slider, #slider .slide{
width: 500px;
height: 250px;
}
#slider {
overflow: hidden;
margin: 0 auto;
font-size: 1.2em;
}
#slider .container {
position: relative;
width: 9000px; /* Assign an insanely large width */
top: 0;
right: 0;
animation: slide-animation 25s infinite;
}
#slider .slide {
position: relative;
float: left;
box-sizing: border-box;
padding: 10px 20px;
}
#keyframes slide-animation {
0% {
opacity: 0;
right: 0;
}
11% {
opacity: 1;
right: 0;
}
22% { right: 100%; }
33% { right: 100%; }
44% { right: 200%; }
55% { right: 200%; }
66% { right: 300%; }
77% { right: 300%; }
88% {
opacity: 1;
right: 400%;
}
100% {
opacity: 0;
right: 400%;
}
}
Any help would be largely appreciated what code to use for arrow keys?
Where to insert div of arrow keys?
How to make the left and right keys work?
Even if you don't know the full answer any type of help is good.
You solely need to download some icons - therefore I recommend Feather icons - insert them as images and make them clickable for example by using JavaScript.
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 am trying to get this effect at my site. example:https://rno1.com/
(scroll down to "we specialize in")
I am very new to HTML and CSS also I am working on WordPress which make it a little bit harder.
started to code with this question here at StackOverflow:
Change body background image on hover with pure html/css
but I wanted to add a transition between the swapping images, also where do I need to change the font attributes?
div.link>a {
displya: inline-block !important;
position: relative !important;
z-index: 100;
}
.bg1:hover+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg2:hover+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.background {
background: transparent;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div class=container>
<div class="link">
bg1
<div class=background></div>
bg2
<div class=background>
</div>
</div>
</div>
You can add some opacity transition like below:
div.link>a {
display: inline-block;
position: relative;
z-index: 100;
}
.bg1+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg1:hover +.background {
opacity:1;
}
.bg2+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.bg2:hover +.background {
opacity:1;
}
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition:1s all;
opacity:0;
}
<div class=container>
<div class="link">
bg1
<div class=background></div>
bg2
<div class=background>
</div>
</div>
</div>
You can also optimize your code like below:
div.link>a {
display: inline-block;
}
.bg1:before {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg1:hover:before {
opacity:1;
}
.bg2:before {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.bg2:hover:before {
opacity:1;
}
.bg:before {
content:"";
position: fixed;
z-index:-1;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition:1s all;
opacity:0;
}
<div class=container>
<div class="link">
bg1
bg2
</div>
</div>
Is there any way of making this overlay more responsive? As in, making the overlay not cut off words, or go outside the image when resolution changes?
To further clarify: I am having three images next to each other in a row, per the W3CSS framework I am using, with three images under that, etc. Each image has an overlay with text links that direct to other pages, as shown in the example below. My only issue is responsiveness. As I want the images, and the overlays, to be responsive to screen size changes and resolution.
Thank you!
.container {
position: relative;
width: 50%;
}
.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: 1;
}
.text {
color: white;
font-size: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<div class="container">
<img src="https://www.google.com/images/branding/product/ico/googleg_lodp.ico" alt="Google" style="height:300px;width:400px" class="w3-hover-opacity">
<div class="overlay">
<div class="text">
Google Sample1<br>
GoogleSample2<br>
</div>
</div>
</div>
<div class="w3-container w3-white" style="height:50px;width:400px">
<h3>Example 1</h3>
</div>
</div>
</div>
To make sure, that your image is the same width as parent, you better use not only width = 100% property, but min-width = 100% and max-width = 100% too. If you want to keep the dimensions of image, you also should point height = auto, but in your case it should be height = auto !important. And for breaking long words in overlay, i have added the following rules:
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
word-break: break-word;
hyphens: auto;
Here is the working snippet:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
min-width: 100%;
max-width: 100%;
height: auto !important;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
word-break: break-word;
hyphens: auto;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<div class="container">
<img src="https://www.google.com/images/branding/product/ico/googleg_lodp.ico" alt="Google" style="height:300px;width:400px" class="w3-hover-opacity image"></a>
<div class="overlay">
<div class="text">
Google Sample1<br>
GoogleSample2<br>
</div>
</div>
</div>
<div class="w3-container w3-white" style="height:50px;width:400px">
<h3>Example 1</h3>
</div>
</div>
Background-size:cover is your friend when it comes to responsive images. With the image being the background, cover will position it so it fits the width/height automatically and will resize in the other direction that it doesn't fit so that it keeps the ratio. That way the image looks like it stays the same size the whole time, but it's responsive and doesn't get distorted.
.container {
position: relative;
width: 0%;
}
.w3-third{
background-image:url('http://www.fillmurray.com/200/300');
background-size:cover;
background-position:center center;
height:300px;
width:33.333%;
float:left;
display:block;
position:relative;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.w3-container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<div class="overlay">
<div class="text">
Google Sample1<br>
Google Sample2<br>
</div>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<div class="overlay">
<div class="text">
Google Sample1<br>
Google Sample2<br>
</div>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<div class="overlay">
<div class="text">
Google Sample1<br>
Google Sample2<br>
</div>
</div>
</div>
</div>
I want to make a 100% css slider. The slider in the jsfiddle below works, but I want to add text below the image that moves with the image. And there I am stuck. I don't understand why the text doesn't show up at all.
Please help...
jsFiddle
html
<div class="slider-wrap">
<div id="slider">
<div class="jt_slides">
<div class="jerslides">
<img src="https://blog.psprint.com/sites/default/files/2014/06/Palette-Fathers-Day-COLOURlovers-Google-Chrome_2014-06-10_14-53-52.png" alt="">
More...
<h2 class="title">Title text 1</h2>
<div class="excerpt">
<div class="stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<p class="whatever" href="#">Some text 1</p>
</div>
</div>
<div class="jerslides">
<img src="https://blog.psprint.com/sites/default/files/2014/05/Palette-Lookin-Like-Summer-COLOURlovers-Google-Chrome_2014-05-29_10-07-53.png" alt="">
More...
<h2 class="title">Title text 2</h2>
<div class="excerpt">
<div class="stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<p class="whatever" href="#">Some text 2</p>
</div>
</div>
<div class="jerslides">
<img src="https://blog.psprint.com/sites/default/files/2014/04/Palette-Mothers-Day-COLOURlovers-Google-Chrome_2014-04-28_09-24-37.png" alt="">
More...
<h2 class="title">Title text 3</h2>
<div class="excerpt">
<div class="stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<p class="whatever" href="#">Some text 3</p>
</div>
</div>
<div class="jerslides">
<img src="https://blog.psprint.com/sites/default/files/2014/06/Palette-Fathers-Day-COLOURlovers-Google-Chrome_2014-06-10_14-53-52.png" alt="">
More...
<h2 class="title">Title text 4</h2>
<div class="excerpt">
<div class="stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
<p class="whatever" href="#">Some text 4</p>
</div>
</div>
</div>
</div>
</div>
css
div.slider-wrap {
width: 640px;
height: 100%;
float: left
}
div#slider {
width: 80%;
max-width: 640px;
}
div#slider .jt_slides {
position: relative;
width: 400%;
margin: 0;
padding: 0;
font-size: 0;
text-align: left;
}
div#slider .jerslides {
width: 25%;
height: auto;
float:left
}
div#slider {
width: 100%;
max-width: 600px;
overflow: hidden;
margin: 26px auto 0;
}
#keyframes slidy {
0% {
left: 0%;
}
29% {
left: 0%;
}
33% {
left: -100%;
}
62% {
left: -100%;
}
67% {
left: -200%;
}
96% {
left: -200%;
}
100% {
left: -300%;
}
}
div#slider .jt_slides {
position: relative;
width: 400%;
margin: 0;
padding: 0;
font-size: 0;
left: 0;
text-align: left;
animation: 16s slidy infinite;
}
div#slider:hover .jt_slides {
/*transition: opacity .5s;*/
opacity: 0.9;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
.jerslides img {
margin-bottom: 20px
}
.jerslides .more-link {
float: right;
margin: 0 0 10px 10px;
}
The text is there, but it does not appear because it inherits the font-size: 0; from its ancestor element div#slider .jt_slides. Remove that rule and the text behaves as desired.
By the way, your CSS contains multiple rule-sets for some of the HTML elements, such as div#slider .jt_slides. Generally it's a good idea to consolidate duplicates into one rule-set. This can reduce confusion and make it easier to change CSS later on. This is because if a CSS rule is defined in only one of the rule-sets, it will still apply. For example here, since there are two rule-sets for div#slider .jt_slides and both contain the rule font-size: 0;, if you only remove font-size: 0; from one rule-set, it will still apply because it's still in the other rule-set. Consolidating would mean that when you remove font-size: 0; once, you know it's gone for good.
Hello guys I would like to know how can I add text in my image slider. I would like to add text to each image. I could do it in Photoshop, but I wont to be able to edit the text in the HTML in future in case it needs changing. How would I go about doing that?
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -115%; }
45% { left: -115%; }
50% { left: -225%; }
70% { left: -225%; }
75% { left: -335%; }
95% { left: -335%; }
100% { left: -445%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 22%; float: left; }
div#slider figure {
position: relative;
width: 500%;
height: 34px;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
#slider {
max-width: 75%;
left: 12.5%;
max-height: 55%;
}
</div>
previously -->
<div class="container center-block">
<div class="col-xs-12" id="slider">
<figure>
<img src="imgs/rdp.jpg" class="img-responsive" />
<img src="imgs/wires.jpg" class="img-responsive" />
<img src="imgs/speed.jpg" class="img-responsive" />
<img src="imgs/tech.jpg" class="img-responsive" />
</figure>
</div>
</div>