I have an href image in this markup.
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="http://image.com/image.jpg" width="100" height="100">
</a>
</div>
When I hover over it, I want to show another image in the top right corner. Is this doable with css? or do I need javascript for that?
My CSS looks like this but it still doesn't work
a.imga:hover {
background-image: url('over.png');
background-position: top;
z-index:3;
}
**Here is the solution you can try**
<div class="imgdiv">
<a class="imga" href="http://destination.com">
<img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" width="100" height="100">
</a>
</div>
Use can do it with CSS, but insted of img tag use a DIV with a background image
<div id="image"></div>
CSS style
#image{
width: 100px; //Image height
height: 100px; //Image width
background: url('') 0 0 no-repeat; //Give your image path here
}
#image:hover{
background: url('') 0 0 no-repeat;
}
Try CSS Sprites, check out this screen-cast from css-tricks.com on how to use them.
You can use :hover pseduo selector on the div with class imgdiv with background-position set appropriately to show on the top right corner. Off course, you should apply background-image to the div first.
Note that :hover does not work in IE6 for anything other than links. However, you can overcome this limitation by using javascript/jquery.
Related
I have multiple div with class called card. I need my all div to be same height and same width. I want to add images to those div. I have different images with different aspect ratios. Also I want whole image filled inside the div. (I want to prevent from cropped images). Therefore, If I can convert all images into same aspect ratio first, then it should be okay. Then I can set .card-img {width=100%}. Height should be same for all images because .card has same width and all images have same aspect ratio. How can I make this work as I mentioned?
<div class="card">
<img class="card-img" src="img-1.jpg" alt="" />
</div>
<div class="card">
<img class="card-img" src="img-2.jpg" alt="" />
</div>
<div class="card">
<img class="card-img" src="img-3.jpg" alt="" />
</div>
.card{
width: 270px
height: 400px;
}
Assume img-1.jpg, img-2.jpg, img-3.jpg has different aspect ratios.
You can't force an image to have a different aspect ratio from its natural one without either cropping or distorting it. You say you don't want to crop so that is not a possibility and you would be unlikely to want to distort it (stretch it in one direction or the other).
What you can do is make sure that the whole image is always visible is use contain instead of cover.
Obviously this means there will be space either at the top and bottom or at the sides of your cards in some cases but this is an inevitable consequence of the no-cropping requirement.
I have faced the same problem many a times. Unfortunately the only options we have available when height and width are fixed are:
Use object-fit: cover on the img element. This results in some cropping.
Use object-fit: contain on the img element. This ensures there is no cropping but adds whitespace around the image.
If you are okay with differing height and width, then you have the option to use a masonry layout as described here:
https://masonry.desandro.com/layout.html
Easy, just set max width and max height to 100% and let the browser sort it out.
.card {
width: 270px;
height: 400px;
border: 1px solid #333;
}
.card img {
max-width: 100%;
max-height: 100%;
}
<div class="card">
<img class="card-img" src="https://picsum.photos/370/400" alt="" />
</div>
<div class="card">
<img class="card-img" src="https://picsum.photos/400/100" alt="" />
</div>
<div class="card">
<img class="card-img" src="https://picsum.photos/400" alt="" />
</div>
This is in case you want the image element. If you want the image as a background, use the contain property.
UPDATE
If you want the images to fill the cells, use
.card img {
width: 100%;
height: 100%;
}
But this will stretch the image. These are the two options you have without cropping.
I have an HTML file that will be portable to distribute to clients. It has an index of documents. I want a PDF or Word icon for each document but I don't want to repeat the base64 string 30 times if I can avoid it. How should I do this? Javascript is okay, but my goals are simplicity and portability.
Try using CSS class
img.word-icon {
content: url(data:image/gif;base64,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);
width: 32px;
height: 32px;
}
<html>
<body>
<img class="word-icon">foo
<img class="word-icon">bar
<img class="word-icon">
</body>
</html>
The other answer using CSS gives the right idea, but it is not compatible with all browsers. The content property of the CSS is only allowed in the pseudo-elements ::before and ::after. The img tag with a class with a content property is empty. The browsers have no obligation to display it. Chrome displays it nevertheless (incorrectly).
To make this work for all browsers, use for example the ::before on an empty span:
span.word-icon::before {
content: url(data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX/+MjMUcAN8zM/9wcM8ZGcATEL+QePdZWf/29uc/P9cmJu9MTDImIN+/r7+/vz8/P8VNQGNugV8AAF9fX8swMNgTAFlDOICAgPNSUnNWSMQ5MBAQEJE3QPIGAM9AQMqGcG9vb6MhJsEdGM8vLx8fH98AANIWAMuQeL8fABkTEPPQ0OM5OSYdGFl5jo+Pj/+pqcsTE78wMFNGQLYmID4dGPvd3UBAQJmTkP+8vH9QUK+vr8ZWSHpzcJMmILdwcLOGcHRQUHxwcK9PT9DQ0O/v70w5MLypoG8wKOuwsP/g4P/Q0IcwKEswKMl8aJ9fX2xjdOtGRs/Pz+Dg4GImIP8gIH0sKEAwKKmTiKZ8aB/f39Wsl+LFt8dgUE9PT5x5aHBwcP+AgP+WltdgYMyZfyywz78AAAAAAAD///8AAP9mZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAKgALAAAAAA9AEQAAAj/AFEJHEiwoMGDCBMqXMiwocAbBww4nEhxoYkUpzJGrMixogkfGUNqlNixJEIDB0SqHGmyJSojM1bKZOmyop0gM3Oe2liTISKMOoPy7GnwY9CjIYcSRYm0aVKSLmE6nfq05QycVLPuhDrxBlCtYJUqNAq2bNWEBj6ZXRuyxZyDRtqwnXvkhACDV+euTeJm1Ki7A73qNWtFiF+/gA95Gly2CJLDhwEHMOUAAuOpLYDEgBxZ4GRTlC1fDnpkM+fOqD6DDj1aZpITp0dtGCDhr+fVuCu3zlg49ijaokTZTo27uG7Gjn2P+hI8+PDPERoUB318bWbfAJ5sUNFcuGRTYUqV/3ogfXp1rWlMc6awJjiAAd2fm4ogXjz56aypOoIde4OE5u/F9x199dlXnnGiHZWEYbGpsAEA3QXYnHwEFliKAgswgJ8LPeiUXGwedCAKABACCN+EA1pYIIYaFlcDhytd51sGAJbo3onOpajiihlO92KHGaUXGwWjUBChjSPiWJuOO/LYIm4v1tXfE6J4gCSJEZ7YgRYUNrkji9P55sF/ogxw5ZkSqIDaZBV6aSGYq/lGZplndkckZ98xoICbTcIJGQAZcNmdmUc210hs35nCyJ58fgmIKX5RQGOZowxaZwYA+JaoKQwswGijBV4C6SiTUmpphMspJx9unX4KaimjDv9aaXOEBteBqmuuxgEHoLX6Kqx+yXqqBANsgCtit4FWQAEkrNbpq7HSOmtwag5w57GrmlJBASEU18ADjUYb3ADTinIttsgSB1oJFfA63bduimuqKB1keqwUhoCSK374wbujvOSu4QG6UvxBRydcpKsav++Ca6G8A6Pr1x2kVMyHwsVxUALDq/krnrhPSOzXG1lUTIoffqGR7Goi2MAxbv6O2kEG56I7CSlRsEFKFVyovDJoIRTg7sugNRDGqCJzJgcKE0ywc0ELm6KBCCJo8DIPFeCWNGcyqNFE06ToAfV0HBRgxsvLThHn1oddQMrXj5DyAQgjEHSAJMWZwS3HPxT/QMbabI/iBCliMLEJKX2EEkomBAUCxRi42VDADxyTYDVogV+wSChqmKxEKCDAYFDFj4OmwbY7bDGdBhtrnTQYOigeChUmc1K3QTnAUfEgGFgAWt88hKA6aCRIXhxnQ1yg3BCayK44EWdkUQcBByEQChFXfCB776aQsG0BIlQgQgE8qO26X1h8cEUep8ngRBnOy74E9QgRgEAC8SvOfQkh7FDBDmS43PmGoIiKUUEGkMEC/PJHgxw0xH74yx/3XnaYRJgMB8obxQW6kL9QYEJ0FIFgByfIL7/IQAlvQwEpnAC7DtLNJCKUoO/w45c44GwCXiAFB/OXAATQryUxdN4LfFiwgjCNYg+kYMIEFkCKDs6PKAIJouyGWMS1FSKJOMRB/BoIxYJIUXFUxNwoIkEKPAgCBZSQHQ1A2EWDfDEUVLyADj5AChSIQW6gu10bE/JG2VnCZGfo4R4d0sdQoBAHhPjhIB94v/wRoRKQWGRHgrhGSQJxCS+0pCZbEhAAOw==);
}
<html>
<body>
<p><span class="word-icon"></span>Paragraph with icon.</p>
</body>
</html>
You can also attach it directly to p::before.
You can use a CSS variable.
In the <head> section of the page, name and define the variable and a class to use it:
:root {
--img-123: url(data:null;base64,iVBORw………); /* your image data here */
}
.img-123 {
background-blend-mode: normal;
background-clip: content-box;
background-position: 50% 50%;
background-color: rgba(0,0,0,0);
background-image:var(--img-123);
background-size: 100% 100%;
background-origin: content-box;
background-repeat: no-repeat;
}
In the <body> section of the page, use the image repeatedly via element style section or CSS classes. The SVG data creates a transparent image through which to see the content.
<img
class="img-123"
src="data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><rect fill-opacity="0"/></svg>"
>
I observed this technique in the output of the open source Firefox / Chrome extension SingleFile. There might be ways to simplify the CSS and to avoid using SVG.
create a script to insert it into the images. I purposely put the script code inline since you're sending a single HTML file:
<img alt="pdf"/>
<img alt="pdf"/>
<img alt="pdf"/>
<img alt="pdf"/>
<img alt="pdf"/>
<img alt="pdf"/>
<script>
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++){
images[i].src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADmklEQVRYhc2VSWgTURjHgycFPVsEtQdRXE96UFDxZHtRXFDRClrxICoIIl7EhWo9eFDEi+jFBRFxqRUFccEusY11abSKjSa2WZqmbZaZzGRt+/d9r5nxzSSpk9iCD34Mb/Le/P7vmy+Jzfafj6l+vx+Ez+fT0e4FAgH09fUhGAyiv7+fEwqFMDAwgMHBQY7T6VzPnjOl3AAVotzr9eoBSG4OQHIxwNDQELq7u4lzRQ3RShsmAwpEAXp6enhQj8dzpmCAMFssr5g5odAzqVIUgK7xeJxXjVXwdF6A0FwbzGRZWZOtLYgcOzI2D/Yh9dmJcG0Nnw+zMqe+OKE8fpS3V4NOHg6HeYBUKgVJkngl2H1jJYJssZm0x43Q5mok3znG5r88CK5cAvX1yz/zAvtEtABut1vvIbrncrnoeldvTP8cG8xkWRMpTW8QOrCfz0lI19TPH2Ofs9ImqSKXL+bt1SBZJBJBNBpFLBbjUBVkWeYw9XQeoJctNpNiFTDMWQDfupVQP37Q54X2GejtLSqnnmDqWTyAe7YNZhLfvhrmadYDSucneGu28Xmy+3veHjP0lS0mVxSFAlTyAC62eDKgd15MbgjwnS2eDOhrV0iuqipHD8DGbMb8Iqxrbm5GU1OTTktLC6e1tRV2ux1tbW1ob2/nOBwOdHR0oKuri/8iamKzPJFIGAJMY8wowmJqJjP0fjUK/UeQnBpQLLkoTyaThgDjjUp6kBmtuQj51VPED22HfP2SodyFTq3JSwogysSu1ohfqYfs+gZ5d7VBXExOv4qE5QCiTGwq/bQNdxB/cBvyvi3jijV5Op3mWA6QJ8ydUj9tMABp7ULEr14cVyzKM5mM9QAGWe6EIiSU1iyC2vnBkpjIZrPWA5hlIiRTO99D2rAa8uljlsTE8PCw9QBmoQjJ5JNHody8BrXxPpR7t/8qJkZGRqwHMJfVQMCHyPJ5SLx3QLlxDbH9NYju2Aj5Qj2ks6cgn6/LExOjo6PWA5jLqqG+eIZo9WrE9m6D+vwpMqrCT6s2PoR04jiUO7cwsHSBQU5igoblAGJJiZTfC+lgLeIX6hBetQxpWTKUmZ+YQr+1I+PtNYg1eUkBtPeoEavdyUNENlUhaW/Oe7/mUotScVgOIJ6MiB09jOiurUg8aRhXWkxccgBRUkhYirSsAKKokLAUaVkBzLJyhWUHmBDbPwSoYFQx9kwwVbln/3VMzS2snGAqcs+2/QZXZB6MU7ZPlQAAAABJRU5ErkJggg==";
}
</script>
I inserted an image into a tag by giving it a class of .img-circle. Now the circle that it yielded is too small and I want to increase the radius.
I even tried giving the <img> tag an attribute of width="35px", but the image circle did not change.
Please, suggest CSS3 methods or with jQuery.
img-circle Bootstrap class only formats the border in such way that it takes the circle form:
.img-circle {
border-radius: 50%;
}
It does not affect the size of your image at all.
You only need to increase your image and this "circle" will increase with it.
Here is the example with three images of type img-circle with different sizes described by CSS classes or inline styling:
.big-image {
height: 100px;
width: 100px;
}
.small-image {
height: 64px;
width: 64px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<!-- Original square image -->
<img class="big-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Big circle image with CSS class rule -->
<img class="img-circle big-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Small circle image with CSS class rule -->
<img class="img-circle small-image" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<!-- Circle image with inline style -->
<img class="img-circle" style="height: 16px; width: 16px;" src="http://static.dezeen.com/uploads/2014/07/Google-Material-Design_dezeen_468_3.jpg"/>
<img onmouseover="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
Its not working. It comes up as a box, not a broken image but a box which doesn't display the image. I'm adding it to my website, could i be putting it in the wrong place? Also, i put it in my forum wrapper and i want the image to be displayed and when you hover your mouse over it so it changes to image 2 please help.
If you intend the image to change on mouseover, you can use this:
<img onmouseover="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png'"
onmouseout="this.src='http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png'"
src="http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png"
align="right"
alt="facebook"
name="facebook"
width="231"
height="231"
border="0"
id="facebook"
style="margin-top: -12px; margin-right: -60px;">
this.src='something'
will set the image src to something.
However, it would be prettier to use CSS and have it as background image, then it will work without javascript.
Please use some CSS, that inline style code gets so confusing.
If you want to do it the nice way do something like this:
#facebook {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign2.png") no-repeat;
width: 231px;
height: 231px;
margin-top: -12px;
margin-right: -60px;
}
#facebook:hover {
background: url("http://www.habbohut.com/_images/_content/_habbohut/facebook_sign.png") no-repeat;
}
<div id="facebook"></div>
This may not be right but from looking at your code your img script doesnt end.
You need to have />
I have a Web Page with my index.html with something like this:
<img class="thumb" onclick="openPhoto(1);" src="img/images/campaign/1.jpg" width="710" height="533" alt="img"/>
What I need to do is to align an image at the bottom center of the screen, because when I open them, they actually appear in the top center of the screen.
just use css
.thumb
{
position:absolute;
bottom:0;
margin:auto;
width://your width accordingly;
}