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>
Related
i was messing around with transform and when i added it to a hover and it didn't work.
I wanna make a share button that when you hover it 3 buttons show them selves
transform works correct but when i use it in pseudo selector:hover its not working.
div {
width: 400px;
height: 400px;
margin: 10px auto auto 100px;
position: relative;
}
img {
position: absolute;
top: 0;
width: 60px;
height: 60px;
}
img[src="instagram.svg"] {
z-index: 1;
}
img[src="linked in.svg"] {
z-index: 2;
}
img[src="telegram i.svg"] {
z-index: 3;
}
img[src="share btn.svg"] {
z-index: 4;
transition: 600ms;
}
img[src="share btn.svg"]:hover {
opacity: 0;
transition: 600ms;
}
img[src="telegram i.svg"]:hover {
transform: translate(30px, 30px);
}
<div>
<img src="instagram.svg" alt="your browser is suck">
<img src="linked in.svg" alt="your browser is suck">
<img src="telegram i.svg" alt="your browser is suck">
<img src="share btn.svg" alt="your browser is suck">
</div>
If you stack two position: absolute items with the same size over each other you will only be able to trigger :hover on the item with the highest z-index
You'll also run into problems with user experience by putting your translates on the :hover of an img, instead try wrapping it in a container (as I did with the div class="share" below)
try this CSS
div {
width: 400px;
height: 400px;
margin: 10px auto auto 100px;
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
}
img[src="instagram.svg"] {
z-index: 1;
}
img[src="linked in.svg"] {
z-index: 2;
}
img[src="telegram i.svg"] {
z-index: 3;
}
img[src="share btn.svg"] {
z-index: 4;
transition: 600ms;
}
.share {
position: relative;
height: 30px;
width: 30px;
}
.share:hover {
height: 120px;
}
.share:hover > img[src="share btn.svg"] {
opacity: 0;
transition: 600ms;
}
.share:hover > img[src="telegram i.svg"] {
transform: translateY(30px);
}
.share:hover > img[src="linked in.svg"] {
transform: translateY(60px);
}
.share:hover > img[src="instagram.svg"] {
transform: translateY(90px);
}
with this HTML
<div>
<div class="share">
<img src="instagram.svg" alt="your browser is suck">
<img src="linked in.svg" alt="your browser is suck">
<img src="telegram i.svg" alt="your browser is suck">
<img src="share btn.svg" alt="your browser is suck">
</div>
</div>
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.
There is a hand icon that I am using on my page and It is directing to three images.I want an animation on this icon, where It should move from initial state to right, then from initial state to left and so forth.In other words, it should cover all the three images.
I have tried myself also, it is moving initial state to right but not from initial state to left.Here is my code snippet down below:
div#skill .logos {
padding: 20px 0;
}
.logos>img {
margin-right: 10px;
}
.move {
position: relative;
animation: move 2s infinite;
animation-direction: alternate-reverse;
}
/*Animation on hand*/
#keyframes move {
0% {
left: 0px;
right: 0px;
}
50% {
left: 60px;
right: 0;
}
100% {
left: 0px;
right: 60px;
}
}
<img class="move center-block" src="img/icons/hand-finger-pointing-down.svg" width="60" height="60">
<div class="logos text-center">
<img src="img/icons/adobe-photoshop.png" width="50" height="50">
<img src="img/icons/bootstrap-4.svg" width="50" height="50">
<img src="img/icons/Sublime_Text_Logo.png" width="50" height="50">
</div>
Please guide me and thank you in advance!
I posted another answer with your exact mark up. You were using both right and left. When you're animating, you should make sure you're animating on the same property/properties, which in this case is left.
div#skill .logos {
padding: 20px 0;
}
.logos, .move-container {
max-width: 200px;
}
.logos>img {
margin-right: 10px;
}
.move {
position: relative;
animation: move 5s infinite;
}
/*Animation on hand*/
#keyframes move {
0% {
left: 60px;
}
50% {
left: 0px;
}
75% {
left: 120px;
}
100% {
left: 60px;
}
}
<div class="move-container">
<img class="move center-block" src="img/icons/hand-finger-pointing-down.svg" width="60" height="60">
</div>
<div class="logos text-center">
<img src="img/icons/adobe-photoshop.png" width="50" height="50">
<img src="img/icons/bootstrap-4.svg" width="50" height="50">
<img src="img/icons/Sublime_Text_Logo.png" width="50" height="50">
</div>
The main difference I think is that I was more specific with my animation. I specified that it should start from center, go to left, go back to center, go to right, then go back to center.
.images {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
img {
max-width: 30%;
height: auto;
z-index: 1;
}
.icon-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.icon-container img {
background-color: #fff;
z-index: 2;
width: 30px;
height: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: move 6s infinite;
}
#keyframes move {
0% {left: 50%}
25% {left: 15%}
50% {left: 50%}
75% {left: 85%}
100% {left: 50%}
}
<div class="images">
<img src="http://img06.deviantart.net/25de/i/2012/134/3/1/037_by_koko_stock-d4zq28i.jpg" />
<img src="http://www.apimages.com/Images/Ap_Creative_Stock_Header.jpg"/>
<img src="http://platowebdesign.com/articles/wp-content/uploads/2014/10/public-domain-images-free-stock-photos-light-sky-silo-windows-lillyphotographer-1024x684.jpg"/>
<div class="icon-container">
<img class="https://cdn3.iconfinder.com/data/icons/touch-gesture-outline/512/double_click_touch_click_finger_hand_select_gesture-512.png"/>
</div>
</div>
I am using the Responsive CSS Image Slider from:
https://codepen.io/dudleystorey/pen/ehKpi
It worked fine when I used 2, 4, or 5 pics. However, when I tried using 6 photos the first and last photo stack together, the last slide is completely blank, and all the slides between have white space under them.
The following is the CSS code after I revised it:
#keyframes slidy{
0% { left: 0%; }
9.09% { left: 0%; }
18.18% { left: -100%; }
27.27% { left: -100%; }
36.36% { left: -200%; }
45.45% { left: -200%; }
54.54% { left: -300%; }
63.63% { left: -300%; }
72.72% { left: -400%; }
81.81% { left: -400%; }
90.90% { left: -500%; }
100% { left: -500%; }
}
.slide {
margin: 0 auto ;
max-width: 700px;
overflow: hidden;
border-style: solid;
border-width: 5px;
border-color: #f6a51c;
}
.slide figure {
position: relative;
width: 500%;
margin: 0 auto;
animation: 30s slidy infinite;
}
.slide figure img {
width: 20%;
float: left;
}
The following is the HTML code after I revised it:
<div class="slide">
<figure>
<img src="http://inmodemd.com/images/bodyfx-ba1.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba2.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba3.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba4.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba5.jpg" alt="" />
<img src="http://inmodemd.com/images/bodyfx-ba6.jpg" alt="" />
</figure>
</div>
Your image is 20%, the total width max is 700 and your trying to squeeze into that percentage. 5 is your max because each image is 20% of the 100% width. 20 x 5 is 100. 6 / 100 = 16.66666 , which means your images wont fit 100% across. Nice slider though. Hope this helps.
I´ve seen that there are already a few questions about CSS Sliders but none of them were like the one I wanted. I´ve already used and edited code from https://codepen.io/dudleystorey/pen/ehKpi . I added two buttons in form of arrows and arranged at the border of the page. But I don´t know how to let the buttons move the banner via CSS and couldn´t find something on the internet. I cannot use JavaScript because the people visiting the website all wouldn´t have much knowledge of Computing. Can you help me? Here is the code I´ve already used:
#keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
#previous, #next{
position:absolute;
top:30%;
z-index:500;
opacity:0.7;
border:none;
background:none;
}
#previous{
left:5%;
}
#next{
right:5%;
}
<html>
<link rel="stylesheet" href="/layout/style/slider.css" type="text/css">
<div id="slider">
<button type="button" id="previous"><img src="/layout/previous.png" id="imgprev"></button>
<button type="button" id="next"><img src="/layout/next.png" id="imgnext"></button>
<figure>
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
<img src="http://demosthenes.info/assets/images/taj-mahal.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ibiza.jpg" alt="">
<img src="http://demosthenes.info/assets/images/ankor-wat.jpg" alt="">
<img src="http://demosthenes.info/assets/images/austin-fireworks.jpg" alt="">
</figure>
</div>`
Am I right that I only have to say the buttons that they make the banner move +/- 100% ?
Thanks for your efforts
Tim