I have this img:
<img src="img1.png" alt="" />
and this CSS:
img{
background-color:green;
opacity:0.4;
padding:5px;
}
you can see here that img's background-color also faded. How can I give opacity only to img and not to its background?
Fiddle
You need another surrounding HTML element to achieve this effect.
HTML:
<div class="wrapper">
<img src="http://i.stack.imgur.com/hUOmz.jpg" alt="" />
</div>
CSS:
img {
opacity: 0.4;
padding: 5px;
}
.wrapper {
font-size: 0;
display: inline-block;
background-color: green;
}
Setting display to inline-block wraps the img, without specifying any size.
Related
I have one question about css. Here is example.
html:
<div class="image"></div>
css:
.image {
width: 250px;
height: 250px;
background-image: url(image.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.image:hover {
background-size: 120% 120%;
}
So In this example everything working fine. When I hover on image, image is zoomed. However I have a lot of images like this and it's not good for SEO to use for every image div, and I want to use < img > tag but there isn't such thing like "background-size". Is there any way to do so with img?
Try This:
.image {
width: 250px;
height: 250px;
margin: 100px;
}
.image:hover {
transform: scale(1.5);
}
<img class="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">
Please try this. I have done by scale property.
.image{
display:inline-block;
width:200px;
height:200px;
}
.image img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;
-webkit-transition:0.5s;
transition:0.5s;
}
.image:hover img {
-webkit-transform:scale(1.1);
transform:scale(1.1);
}
<div class="image">
<img src="https://dummyimage.com/200x200/000/fff" alt="" />
</div>
Hope this snippet helps you.
.image{
display:inline-block;
width:250px;
height:250px;
overflow: hidden;
}
.image img{
width:100%;
height:100%;
transition:all 0.5s ease;
}
.image:hover img {
transform:scale(1.2);
}
<div class="image">
<img src="https://dummyimage.com/250x250/000/fff" alt="" />
</div>
I don't really get what you want to achieve but in your code
<div class="image"></div>
is equivalent in display to
<div><img class="image" /></div>
I'm trying to get a CSS-only solution for a cut-off bottom right corner on every image in a page.
So far, I have come up with this:
img::after {
content: url(/images/whitecorner.png);
height: 20px;
width: 20px;
display: inline-block;
float: right;
}
But the doesn't appear in the document anywhere. (I'm using the Chrome inspector).
I hope someone can point me in the right direction. Thanks in advance!
Example
You can not use ::after with img.
Same with inputs, this is because they are self closing (/>) and hold no content.
What you could do is something like this:
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
and then use
.cut-image::after{
/*styles*/
}
In my example I used:
HTML:
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
<div class='cut-image'>
<img src='http://placehold.it/250'/>
</div>
CSS:
.cut-image{
position:relative;
float:left;
margin:0 5px;
overflow:hidden;
}
.cut-image::after {
content: '';
position:absolute;
bottom:0;
right:0;
height: 0px;
width: 0px;
border-left:40px solid transparent;
border-top:40px solid transparent;
border-bottom:40px solid white;
border-right:40px solid white;
}
img is an inline element and :before or :after won't work , you'll have to wrap the img with a div
this is probably what you need:
http://jsfiddle.net/h7Xb5/1/
this is the css:
div {
width:300px;
height:300px
}
div:hover:before {
content:"";
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
background:url(http://www.linobanfi.it/immagini/lino_banfi_3.jpg) no-repeat center center;
}
I'm looking for a solution to add a fadein and fadeout effect to this line of code:
<img src="images/1.jpg" onmouseover="this.src='images/2.jpg'"
onmouseout="this.src='images/1.jpg'" alt="fade_me" />
Does anyone have any simple solutions without this becoming too complex? Thanks!
Well, I don't know about complexity, but this works pretty well.
http://jsfiddle.net/8KFT8/1/
<style>
.container {
position: relative;
}
.container img {
position: absolute;
transition: opacity .5s ease;
}
.container img:hover {
opacity: 0;
}
</style>
<div class="container">
<img src="images/2.jpg"/>
<img src="images/1.jpg"/>
</div>
html code:
<div class="container">
<a class="ank">
<img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</a>
</div>
css code:
.ank
{
display: block;
width: 500px;
height: 500px;
line-height: 100%;
}
img
{
vertical-align: middle;
}
.container
{
display:block;
width: 500px;
height: 500px;
border: 1px solid black;
font-size: 500px;
}
jsfiddle: http://jsfiddle.net/mfBZZ/5/
if i change the jsfiddle, so that anks line-height is 500px, and remove the font-size from container, it works.
but when i add the font-size to container of 500px, and then make the line-height in ank, 100% of that font-size, it doesn't work. it brings the image alittle lower than where it should be.
working jsfiddle: http://jsfiddle.net/eujFY/1/
UPDATE:
this solution works for me:
http://jsfiddle.net/eujFY/2/ <---- updated.
I've seen you found a solution, however it implies setting the height manually on both elements and it requires the usage of unnecessary tags.
So I suggest you to check the "display:table" (container) and "display:table-cell" (inner element) rules: http://jsfiddle.net/RxGS5/
HTML
<div class="container">
<a class="ank">
<img src="http://www.w3schools.com/images/w3schoolslogoNEW310113.gif" />
</a>
</div>
CSS
.container
{
display:table;
width: 500px;
height: 500px;
border: 1px solid black;
}
.ank
{
display: table-cell;
vertical-align: middle;
}
For some odd reason I added a responsive image to my responsive layout and it seems to add some sort of spacing below the image.
You may view the issue here: http://www.client.noxinnovations.com/jensenblair/
The top image. Here is my HTML and CSS.
HTML
<div class="header"> <img src="images/photograph.jpg" /> </div>
CSS
img {
max-width: 100%;
height: auto !important;
}
.header {
height: auto;
padding: 0;
margin: 0 auto;
border: none;
}
It seems to be consistent in each browser. Any ideas anyone?
There are two ways (that I know of) to solve this: http://jsfiddle.net/3kC4K/1/
<div>
<img src="http://placehold.it/100x100/"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="block"/>
</div>
<div>
<img src="http://placehold.it/100x100/" class="inline"/>
</div>
CSS
div{
border:solid 1px #f00;
margin:5px;
float:left;
}
.block{
display:block;
}
.inline{
vertical-align:bottom;
}
img tags, by default, are inline elements. Because of this, browsers will create a sort of "gutter" underneath them so that any text that wraps below it won't be flush with the bottom of the image.
In your case, simply applying display:block to the image should do the trick.