What are important factors when implementing second images on hover? - html

I'm implementing a second image on hover in a list. This is very common for example in list views of products. I have two ideas for how to do this:
Either put two images on top of each other like this
<div class="wrapper">
<img src="1.jpg" />
<img src="2.jpg" />
<div>
Then hide one image and when hovering the wrapper I will show it with css.
Or I would make one div:
<div class="container" />
and then use inline css to set the background images on .container.
I could also do something with javascript of course.
How, if at all, would these solutions affect performance on hover and page-loading time? Is there an even better solution? The site is built in react.

Since you are using react, you could simply manage the visibility of that second image via the state.
But if you only have two images and don't need any kind of cycling of images, using css should be the solution with the best performance.
Use your current setup like this:
<div class="wrapper">
<img src="1.jpg" />
<img src="2.jpg" />
<div>
And put the first image ontop of the second one. Then just hide the first element on hover.
The only impact this has on performance/loading time is, that you would fetch two images per item on page load.
Using react instead, the second image would not be loaded until you render it into the DOM (But if the image takes some time to load, it wont look that smooth).
However, native css transitions are much more efficient than solving this with react. At least for this small usecase.
If you however want to solve it with react, I would suggest trying your backgroundImage approach. Just keep track of the hover state in your component and switch the background image accordingly.

I think, the easiest way would be:
.sample {
background: url(http://placehold.it/200?text=First) center/cover no-repeat;
height: 200px;
width: 200px;
}
.sample:hover {
background-image: url(http://placehold.it/200?text=Second);
}
<div class="sample"></div>
And with image paths inlined:
.sample {
background: url() center/cover no-repeat;
height: 200px;
width: 200px;
}
.sample:hover img {
opacity: 0;
}
<div class="sample" style="background-image: url('http://placehold.it/200?text=Second')">
<img src="http://placehold.it/200?text=First" />
</div>

Related

Need to make images responsive in CSS/HTML for custom plugin

I've searched the existing questions and found some similar issues, but the suggestions there didn't solve my problem.
Here is the issue:
We are using the Visual Editor plugin for Wordpress. My boss wanted this plugin to be used for a special promotion area in the header - he wants to display images that are clickable or have a button. I wrote some custom CSS so this plugin will do that. The issue, as you know, is you can't make a link in CSS. So for the background image, I needed a button. However in this particular case there was so much text on the image, a button would not work.
So, I wrote an ID that I could call in HTML. I made a link, called the ID, and then inside the ID I put a text indent that would push the text off the page and the image would be clickable.
The issue here is that for some reason the image would not fully load. It was cutting off height-wise. I had set width: 100%; and height: auto;, but neither of those things worked.
So, I ended up simply inserting the IMG normally, and linking it normally, but now the problem is I need it to be responsive.
I wrote a class called .responsive-image and made the width: 100%; and height: auto; but this still doesn't work.
Do I need to put the responsive image information elsewhere? Do I need to write some other class? I'm at a loss and have looked at this too long at this point.
You can see this header widget right here - 100daysofrealfood.com/carrot-top-almond-pesto-sustainable-almond-recipes/
And if you inspect you can see what I mean about it not being responsive.
Here's what I've written to insert it into the widget:
<div class="days100-background-header-widget"><div class="responsive-image"><a
href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>
I have the class in there two places. Maybe that's the issue?
Here's the CSS for the main header widget class:
.days100-background-header-widget{
display: flex;
align-items: center;
justify-content: center;
}
Any feedback is really appreciated. Thanks for reading this super long question!!
The problem is not on the image itself, but on the parent <div> with the class of .days100-background-header-widget. It is set to display: flex so that div is not 100%.
If you want to center things on the screen you can use margin: 0 auto on a block element.
.days100-background-header-widget{
display: block;
margin: 0 auto;
}
.responsive-image {
width: 100%;
height: auto;
}
<div class="days100-background-header-widget">
<div class="responsive-image">
<a href="https://www.100daysofrealfood.com/spring-reset-real-food-mini-pledge-
program/?utm_source=headerwidget">
<img src="https://www.100daysofrealfood.com/wp-
content/uploads/2017/04/WidgetHeaderAreaMP2017.png" border="0"
class="responsive-image" alt="Real Food Mini Pledge Program" />
</a>
</div>
</div>

HTML & CSS working with images of different shapes

As some of you guys may know allowing users to upload images can be a hassle and especially if you have to create some sort of list with them.
I have been looking all over the web and have been unable to find concrete answers to what you do in the case where you need to show a list of images of different shapes. Therefor i turn to you.
Say User 1 uploads the following image:
And User 2 uploads this image:
As you can see these two images are very different in both height and width.
Now lets say that you have 10 images of different sizes and wish to display them in a grid 4 by 4 (for this purpose i use ng-repeat to show a loop)
<div class="col-xs-4" ng-repeat="image in images">
<img alt="" ng-src="{{image}}">
</div>
if you do this, this will create a list that is uneven! and will look very "ugly" to say the least.
So my question is what do you do? Are there any tricks using CSS to make it fit any images of any size so that everything is aligned?
I hope my description of the problem was accurate enough for the sake of demonstration here is a fiddle that shows this issue as well.
In short how do i make sure they are all the same size without making one of the images look cramped and / or distorting the individual image?
fiddle
As mentioned in my comment, one option is to crop all the images to a suitable format, a square might be a good compromise. You can do this by wrapping your images in a container first, and positioning the image in relation to the container. Example:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.image-container {
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
padding: 20px;
}
.image-container img {
width: 100%;
height: auto;
position: absolute;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-4">
<div class="image-container"><img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
</div>
</div>
</div>
Fiddle
You can also position the image in the container. For example if you wanted to center it you could add:
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
One solution is to provide the users with a cropper to your preferred ratio and allow them to select the part of the image to show.
An alternative is to use the images as background on a div with specific ratio and hope that it does not show irrelevant areas.
Here is a solution for the second case (with a - just for laughs - animation to show the whole of the image)
http://jsfiddle.net/mrccf3sv/
.image{
display:block;
background: url('') 50% 0% no-repeat;
background-size:cover;
border:1px solid #ccc;
animation:pan 10s linear infinite alternate;
}
.image:before{
content:'';
display:block;
padding-top:56.25%; /*ratio of 16:9*/
}
And see it responsive by using different bootstrap column count for each breakpoint.
http://jsfiddle.net/mrccf3sv/1
Scaling with CSS is incredibly bad practice. I mean, we all have to do it sometimes, but if you CAN scale server-side, better do that. Try PHP's imagick, if available.

Img src VS CSS Background Image No Intrinsic Dimensions

I've got a markdown with HTML built inside and I need to change the following:
<img src="..." />
Into
<img class="image" /> // Could also be a div, doesn't matter
And give it a background-image CSS style instead (this is due to webpack bundling and the fact I have no imports and variables in .md files)
Problem is that the first option loads the image properly without having to specify height/width, and the 2nd approach shows nothing unless I specify height/width.
Fiddle demonstrating issue
Why is this, and is there a way to bypass this without specifying height/width for every such occurence?
The best you can do is calculate the proportion of the img and then use the value for padding and cover to fit that:
As an example if the image is 1:1 proportion:
.image {
background-image: url('http://i.imgur.com/3Zh2iqf.jpg');
background-repeat: no-repeat;
background-size:cover;
padding-top:100%;
}
<div>
<div class="image">
</div>
</div>

How to pull IMG SRC from one HTML tag into another?

I'm working on a school project and I'm wondering if this is possible:
In one div, I've defined an <img>, which will display.
In the second div, I want the img src to come from the first div.
Is it possible to do this? Preferably without anything besides css/html.
If you don't mind a little JS you can do it inline in your HTML. E.g.
<img id="img1" src="http://cdn.obsidianportal.com/assets/50953/serenity19dc.png" />
<img id="img2" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="this.src=document.getElementById('img1').src" />
Here the second image has intially just a placeholder image (1x1 gif) but on load it is replaced by SRC from the first image.
You need JavaScript to copy the src attribute, but you can have two images while defining the URL in one place by defining a background image in CSS:
.is-image {
background: url('http://www.google.com/images/srpr/logo11w.png') no-repeat;
width: 538px;
height: 190px;
}
<div class="is-image"></div>
<div class="is-image"></div>

CSS3: Use On-hover Event to Set Semi-transparent Overlay on an Image

I need an on hover semi-transparent div which causes some text to appear over the top of a thumbnail image? Is it possible to do this without using JavaScript and using just Cascading Style Sheet?
You can try something like this:
<style type="text/css">
.thumb {position:relative;width:200px;height:20px;}
.thumb:hover .overlay {opacity:0.5;}
.overlay {position:absolute;top:0;left:0;width:200px;height:20px;background:#fff;opacity:0;}
</style>
<div class="thumb">
<div class="overlay"></div>
<img src="image.gif" />
</div>
Ok ok I know this is old but i ran into and have something to add about opacity settings
http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/
give that a look over, I find using rgba when ever possible over opacity procuces a much better result, opacity can work funny in different browsers and cause all manner of asthetic problems...
just my 2 cents
Depending on what you're doing with the thumbnail, you could set the background of the DIV as the image, include the text, and use CSS to toggle the visibility from transparent to solid on hover.
This'd only work cleanly if you have a known-size thumbnail (because it's hard to autosize a div to the size of its background image), but it'll make for a simple solution in your html:
<div class="thumb" style="background-image: url(thumb.jpg);">
<p>mouseover text</p>
</div>
The important css would be something like this...
div.thumb p { visibility: hidden; }
div.thumb:hover p { visibility: visible; }
Not sure from your question whether the whole div is supposed to be transparent or just the text, but you can apply the relevant CSS at either level.