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
Related
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.
I´ve been trying (and searching) since days, but didn´t got my idea work...
I use the featherlight lightbox to display HTML content (text with some images). Because of some pics are very small, i´d like to have an image-zoom on them.
Example of the zoom here: jquery.elevatezoom.js #6:inner-zoom
The elevatezoom.js works well outside the lightbox, but unfortunately not inside. Did/does anyone get this working together? Or do I need another javascript(?) I tried several.. Thanks for help!
The problem seems to be in the way the ElevateZoom plugin is calculating the position and dimensions of the image.
If you do try to put a picture inside the featherlight hidden div, you'll see that ElevateZoom does create a zoomContainer and everything is working, except this is its generated css:
left: 0px;
top: 0px;
height: 0px;
width: 0px;
This seems to happen because when you call $('#image_element').offset() it returns {top:0,left:0} I assume because when it's inside the featherlight container, its position is fixed.
I think the easiest way to fix this, if you haven't already found another image zooming library, is to just make this effect yourself. You would simple have two divs in the featherlight container, one hidden containing the larger picture, and one smaller containing the normal picture. When the mouse enters the picture, you hide the small and show the big. That would be the first step.
The second step is making it scroll. The way elevateZoom handles this is by setting the background-image to the large image, and moving it around using the background-position attribute. Here's what the elevateZoom generates as an example:
<div style="z-index: 999; overflow: hidden; margin-left: 0px; margin-top: 0px; width: 411px; height: 274px; float: left; cursor: crosshair; position: absolute; top: 0px; left: 0px; display: block; opacity: 0; background-image: url("images/large/image1.jpg"); background-position: -152.651px -545.577px; background-repeat: no-repeat;" class="zoomWindow"> </div>
Notice the background-image and background-repeat. You can move that around with Javascript as the cursor moves relative to where the image is positioned.
I hope this helps!
I'm writing a HTML5 site in MVC5 that is of variable width and at its maximum width there's an image showing in full inside a div. As the site narrows, currently it takes away content from the right of the image, but I want it to take it away evenly from either side.
The outer wrapper div of the site is defined to keep the site centered, with styles as follows:
#wrapper {
min-width: 1152px;
max-width: 1680px;
margin: 0 auto;
position: relative;
}
The div that contains the image has the following styles:
#main {
position: relative;
overflow: hidden;
}
Currently I've just got the image within an img tag inside the main div, like follows:
<img src="#Url.Content("~/Content/Images/Home/home.jpg")"/>
How can I make the image narrow evenly on both sides as the site narrows and conversely, show the image on both sides evenly as it widens again up to its maximum? Is there a way in CSS, or will I need to do something in Javascript?
Thanks.
If using CSS transforms is an option, you could position the image by left: 50% and then use a negative translateX to make it centered.
This way it will show/hide the image evenly on both sides:
Example Here
<div class="img-container">
<img src="http://placehold.it/500x350" alt="">
</div>
.img-container { overflow: hidden; }
img {
vertical-align: middle; /* remove the vertical gap under inline level elements */
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
It's worth noting that CSS transform is supported in IE9 and newer.
Try this:
<img src="#Url.Content("~/Content/Images/Home/home.jpg")" style="background-position: center;"/>
It will center the background in the middle of the elemnt so that it should narrow it evenly
I've got a lateral fixed div (like a menu bar) and I am trying to figure out how i could put images in there, in a table-like view (for example 3 columns and X rows) knowing that those images are dynamically generated.
To be more specific, I would have 10 images to put in there. I can put them there just in html, but then javascript is gonna display or not certain images depending on various factors (mostly user privilegies), and so I would like those images to re-order automatically.
I'm more a JS than a CSS fan so I would place the images in fixed and use a script to handle their top and left properties, but I am sure there is some way of doing this with css (not css3, I am trying to do some retro-compatibility) or any other simpler way.
Thanks a lot
I think this is what you need.
http://jsfiddle.net/x6zfW/10/
Please confirm.
HTML:
<div id="ui_myMenu">
<div id ="ui_ui_myMenuTitle">HELLO TITLE</div>
<img id="ui_image1" class="ui_menuIcons" src ="http://www.designworks.co.nz/uploads/images/case-studies/nz-post/post_button.jpg"/>
<img id="ui_image2" class="ui_menuIcons" src="http://t2.ftcdn.net/jpg/00/24/77/15/400_F_24771516_GheG3ehk2o3T6mJJkFy9k2siYoMrVigc.jpg"/>
</div>
CSS:
#ui_myMenu{
position: fixed;
bottom: 15%;
width: 575px;
height: 426px;
left: 2%;
top:2%;
background:url('http://www.psdgraphics.com/wp-content/uploads/2009/02/abstract-background.jpg') left top no-repeat;
}
#ui_myMenuTitle{
margin-left: 16%;
margin-top: 4.8%;
font-size: 380%;
}
.ui_menuIcons{
float: left;
width : 5%;
height : 7%;
}
Sounds like a job for masonry ...
If not, wrap the icons and position their container http://jsfiddle.net/mplungjan/HAggq/
I have three stacked images that I rotate through using Dojo fadeIn and fadeOut and a timer. Only the href for the last one is ever available. Is it possible to rotate the href as well?
<div id="main-slideshow">
<img src="images/catalog/WRP21Aug10_0014.jpg" />
<img src="images/catalog/WRP21Aug10_0015.jpg"/>
<img src="images/catalog/WRP21Aug10_0017.jpg"/>
</div>
Here's the CSS for it:
#main-slideshow
{
width: 300;
height: 400;
position: relative;
}
#main-slideshow img
{
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
I tried changing the z-index, but that doesn't appear to work. It's my first Javascript module using Dojo so I could have miss-coded something.
Would suggest fading in/out the entire tag. Or even wrap them in three divs and fade them instead.
You could also rewrite the script to change the href attribute, but that would probably just complicate things. Hope that helps!