I'm making a web-page that is full of GIF images. Is there any way to make my website to load faster? Like load the GIF one by one or just play the GIF on hover and if there is a way may I know how to do it?
You can make a hover effect to show these images using CSS transitions. When you hover over the H1 tag, the image will display.
HTML
<h2>Fade in Overlay</h2>
<div class="container">
<h1>Show Image</h1>
<div class="overlay">
<img src="http://via.placeholder.com/500x500" alt="Avatar" class="image"
</div>
</div>
CSS:
.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;
}
You could first of all try compressing the GIFs somehow first and seeing if that would improve your webpage load times.
If the page is holding several dozens of animated GIFs, my recommendation is to load them in chunks. Five at a time, ten at a time maybe. If you load them one by one, users may get annoyed that only one would be showing at a time, load all of them at once the user will get annoyed that any of them wouldn't be loading fast enough. You need to work with a combination of both.
Related
I am building a website and on the landing page I have a couple of images with a javascript interaction. These are being brought by javascript instead of html and they are on an .img on css.
``` img{position: absolute; top: 500px; left: 400px; transform: translate(-50%, -50%) scale(0.2); animation: fadein 0.5s;} ```
On the second page of the website I have more images but I have put them together as grid with Responsive equal height images using CSS.
.img {width: 100%; height: auto; vertical-align: middle;}
My problem is that the second page is using the .img attributes from the first page and not the second one and I am not sure how to differentiate them?
Here's a picture of how the left page should be looking vs how it's looking.
picture of what should be looking vs how it's looking
I am really running on a tight deadline but I can't seem to fix this, does anybody know what could I do? :(
Thank you so much!
The img selector is too vague, it will target any img on the page. You should make it more specific.
You have to create a different CSS class for each case.
The problem is you are using img { } in CSS. This is fine for when you want all the images to be styled the same way, however you want separate styling for separate images. To overcome this we use selectors.
Use a class. A class selector will only style tags that have class="" in them, in this case <img> tags
img.page1 {
position: absolute;
top: 500px;
left: 400px;
transform: translate(-50%, -50%) scale(0.2);
animation: fadein 0.5s;
}
img.page2 {
width: 100%;
height: auto;
vertical-align: middle;
}
Now if you add class="page1" and class="page2" respectively to your images and/or containers, the images will use the CSS formating for their own class.
Something like this <img class="page1" src="my_image.jpg">
Or <div class="page1"> (<img> tags here...) </div> will also work and will save you putting the class for each <img> tag
I have an <img> that I want to be able to hover over, and when hovering over it I would be able to animate or fade in a div or text to display information of sorts. The information displayed will be overlaid on the image.
I've seen this done on a website before, I can't remember or place where I've seen it, but the idea is very clear in my mind.
I'm sorry I don't have any good attempts at this, I've read around and can't find anything that works for my idea.
I have not understood JS fully, but I can think of a few ideas to try and make it work. I just need a little help to get me in the right direction, before I try and do the rest by myself.
My first idea would be to remove the image directly, then replace it with a div that has that image in background-image with text overlaying it.
document.getElementById("imageBox").onmouseover = function() {
imageMouseOver()};
var image = document.getElementById("imageBox");
var textHere = imagine a lot of html here;
function imageMouseOver() {
document.getElementById("imageBox").parentNode.removeChild(image);
document.getElementById("imageBox").add(textHere);
};
The above doesn't work, and my other ideas would be based off of the initial one, for example:
-instead of removing the image, have the opacity of the image be reduced and something be added over it to simulate that effect
-or, have opacity:0 to the actual overlay to hide it, and onmouseover, just make it appear with opacity:1 and maybe transition: opacity 200ms ease?
Sorry I am asking too much here, but I'm pretty much clueless where to start, could someone point me somewhere for me to get started? Ideally a few examples would be good, or a site explaining it would be great!
Here's an example with CSS using :hover to transition the opacity of your text element.
.wrap {
display: inline-block;
position: relative;
padding: 1em;
background: #fff;
box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
.text {
background: rgba(0,0,0,0.8);
color: #fff;
transition: opacity .5s;
opacity: 0;
position: absolute;
top: 1em; bottom: 1em; left: 1em; right: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.wrap:hover .text {
opacity: 1;
}
img {
max-width: 100%;
display: block;
}
<div class="wrap">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="text">text overlay</div>
</div>
I have this website.
I have a div with an embeded YouTube video and I am trying to hide the lower part of the video with a banner so that the YouTube logo that appears at the bottom is covered.
I have added another div for the banner, I used z-index and position: absolute; top:700px; to make it stack over the video but this makes the banner position unpredictable on all browser.
Firefox and IE looks good but it's not working well on Chrome or Safari because the banner is too low and doesn't cover the bottom of the video properly.
How else can I do this so that it works on all browsers? Basically I just need the banner to stack over the bottom of video so that it covers the area I want hidden.
Here's what I have
.embed-container {
width: 100%;
overflow: hidden;
position: relative;
margin-top: -80px;
padding-bottom: 0px;
margin-bottom: 0px;
z-index: -1;
}
.mask {
position: absolute;
top: 700px;
right: 0px;
width: 100%;
height: 150px;
background-color: #ef1446;
z-index: 11;
}
.bottom {
bottom: 0;
}
<div id="lgvid" class='embed-container'>
<div class='over'></div>
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class='embed-container'><iframe src="https://www.youtube.com/embed/Yo19ZhO7CAc?autoplay=1&loop=1&playlist=Yo19ZhO7CAc&cc_load_policy=1rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
<div class="mask bottom">
<br><br>
<center>
<h1 style="color:white;">¿Que estas buscando?</h1>
</center>
</div>
Use Vimeo, or HTML5. If removing the YouTube logo is all you want, it's a lot less trouble doing it that way. You can download the video from Youtube, here
Another thread discusses placing a div over a youtube video, this might be what you are looking for.
How to show a div over a Youtube video (z-index)?
[SOLVED] My main problem was just that the banner was not in the same position on Chrome and Safari when using z-index to stack my divs. On these two browsers, the banner was horizontally lower than in I.E. and Firefox.
I solved the issue by using a browser specific CSS hack found here: http://rafael.adm.br/css_browser_selector/
The browser specific CSS hack allowed me to position the banner in the exact position I wanted for those two browsers where the banner was out of place. I still used z-index in all style sets for all browsers just slightly different top margins for the Chrome and Safari specific CSS.
I'm developing a phonegap app for iphone and android.
I have a black overlay with a loading message that appears when the user clicks on a button.
Everything is fine on ios, but on android, the fadeIn() function only displays parts of the overlay. Like, really, parts. Sometimes just the bottom, sometimes the bottom and the top right corner... Really weird.
Although if I use .show() instead, everything goes right.
Have you ever seen something like this ? (terrible quality but you can see the overlay on the bottom half, and a semi-transparent piece of overlay on the top right corner.)
What's wrong with the .fadeIn() function on android ?
(Here is the css if you need it)
.black-overlay {
position: absolute;
width: 100%;
height: 120%;
background-color: #000;
color: #FFF;
display: none;
z-index: 99999;
top:0;
}
And the beginning of the HTML code :
<body class="side">
<div class="black-overlay row-fluid"> //overlay
<div class="span12 loading-splash">
<div class="span12"><span>Chargement...</span></div>
<div class="span12 span-no-margin"><img src="img/ajax-loader_black.gif" alt=""></div>
</div>
</div>
<div class="app container-fluid event-creation"> //Rest of the app...
Here's some CSS that I use for background overlays.
.ajax-loader-background
{
background-color: rgba(0,0,0,0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000);
zoom: 1; /* Force hasLayout in IE. */
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 99999;
}
I'm not sure why you get a different result with .fadeIn, except that jQuery might need to know the width/height of the element, and if it's not visible it has zero width/height.
I've noticed slight differences between width: 100% and left: 0px; right: 0px. Same with height: 100%. You're also setting the height to 120% which I've never seen done with absolute positioning. You should not have to do that for an overlay.
I just stumbled across this guys site: http://mantia.me/
He has an awesome logo that reacts to the content the site is currently showing, if you wait on his homepage the logo changes with the slide show of images. I was wondering if anyone knows how to replicate the effect. I'm guessing it's a transparent png with a rotating master background then the site is layered on top, but I'm probably wrong.
Any guesses on how to make something similiar?
Images:
It's really simple what he has. Like you mention it's a transparent PNG that matches the given background ( in this case white ) and places it on top of it with z-index. The rest is just jQuery with fadeIn and fadeOut images.
You can view the png on top of the image transitions.
So basically you just need a div with position:relative set the width the height of it; then add another div inside it which has the jQuery Slideshow (check this out: http://medienfreunde.com/lab/innerfade/), set it a z-index:0 Then add another div (which will go on top of the slider) and add it a background with z-index to something higher than 0 and you're good to go.
Here is how he does it:
HTML
<div id="content">
<div id="feature"></div>
<div id="navigation"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
margin: 64px auto;
font: normal 13px/16px "myriad-pro-1","myriad-pro-2", sans-serif;
color: #404040;
}
#navigation{
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 800px;
height: 46px;
background: transparent
url(http://mantia.me/wp- content/themes/minimalouie/img/nav.png)
no-repeat top left;
}
#feature {
width: 800px;
height: 466px;
overflow: hidden;
background-color: aqua;
}
And then he just adds an img element to #feature.
<div id="feature">
<img src="http://mantia.me/images/supermariobros_large.jpg"
alt="Super Mario Bros.">
</div>
See fiddle.