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>
Related
I'm trying to use bootstrap grid to format my webpage layout. There are two elements on my page, an image and a subtitle for the image. I would like that both elements occupy the whole screen of a smartphone, just under the navbar. Could anyone help me? I'm also tryint to make it looks nice on pc and other plataforms.
I have done some progress using media screen, but its still clunky.
Thats my .index html:
<div class="row">
<div class="combocontainer col-lg-12">
<div class="combocontainer">
<div class="top-container">
<img class="avatar" src="Images/minimalist.jpg" alt="avatar" />
</div>
<div class="signature">
<h1>My Name</h1>
</div>
</div>
</div>
</div>
Thats my css:
.avatar {
display: block;
margin-top: 220px;
margin-left: auto;
margin-right: auto;
height: 100%;
width: 100%;
}
.combocontainer{
height: 100vh;
}
#media screen and (min-width: 1000px) {
.combocontainer {
display: block;
margin-top: 6rem;
margin-left: auto;
margin-right: auto;
height: 20%;
width: 20%;
}
}
/* No implementation yet */
.signature {
text-align: center;
height: 20%;
width: 20%;
font-family: "romatehood-p73ed-webfont";
}
While scrolling down through a image animation it flickers between each image. When scrolling back up and starting over, the flickering goes away. Works perfectly fine in Chrome and Firefox. Heres the code structure:
HTML
<div class="container" id="arena">
<div id="animate"
data-anchor-target="#arena"
data-smooth-scrolling="off"
>
<img class="lazy" src="img/animations/ctu_hq_animation_mb_4.0001.png" alt="" data-0-top="display:none;" data--100-top="display:block;" data--125-top="display:none;">
<img class="lazy" src="img/animations/ctu_hq_animation_mb_4.0003.png" alt="" data-0-top="display:none;" data--125-top="display:block;" data--150-top="display:none;">
<img class="lazy" src="img/animations/ctu_hq_animation_mb_4.0004.png" alt="" data-0-top="display:none;" data--150-top="display:block;" data--175-top="display:none;">
</div>
CSS:
img {
height: 500px;
width: 800px;
position: fixed;
}
#arena {
position: relative;
width: 1000px;
height: 900px;
background-size: 900px 800px;
}
#animate {
width: 850px;
height: 650px;
position: fixed;
background-size: 900px 800px;
background-repeat: no-repeat;
left: 10%;
}
Fixed, img {position: fixed) was the problem. Remove and solves the problem
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 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.
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;
}