I have img tag set with css:
.bakery-item > img {
content: url('img/art-of-cakes-sprites.png');
object-fit: none;
}
how can I then resize image just like I would with background-size property?
.bakery-item > img {
width: 50%;
/* resize image by 50% */
}
Image is a sprite so I dont want to use cover-like solution. I tried using transform: scale(.5); on element but this doesn't make element shrink in DOM (it still takes the same space).
I couldn't find anwser over the internet.
This code sets the transform origin to the top left corner and scales to half size.
.bakery-item > img {
transform-origin: 0 0;
transform: scale(0.5, 0.5);
}
Related
I'm trying to create a transition for both an image and a pseudo element of its container, but for some reason, these transitions appear to be out of sync with each other, resulting in the pseudo element reaching a opacity: 0 state before the image does.
I've tried various combinations of style rules, but I never managed to accomplish an ease-in-out transition to work correctly.
Here's some context for the current code: the image is padded on purpose, to provide a better visual (centered) of its content. The images that'll be used are always guaranteed to have a white background. That's why I'm using a pseudo-element with a white background color to fill the vertical spaces that the image does not cover.
The background-image should take the full width/height of the container and there are not guarantees of its background being white.
The desired effect is for both the pseudo-element and image to reach opacity: 0 at the same making it look like its a single element.
I'm also considering using an ::after pseudo element to provide a "loading skeleton" while the image is not retrieved from the server, but that's not a concern for now.
Here's the code, and the respective fiddle: https://jsfiddle.net/rjk2z31d/1/
*,
*::before,
*::after {
box-sizing: border-box;
}
.box {
width: 248px;
height: 320px;
}
.image-box {
position: relative;
display: block;
background-repeat: no-repeat;
background-size: cover;
line-height: 0;
background-color: #FFFFFF;
&::before {
display: block;
content: "";
width: 100%;
padding-top: (100% + (100% / 3));
}
img {
z-index: 1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translate3d(0, -50%, 0);
padding: 16px 16px;
}
&::before, img {
background-color: #FFFFFF;
opacity: 1;
transition: all 1.5s ease-in-out;
}
&:hover {
&::before, img {
opacity: 0;
}
}
}
<div class="box">
<div class="image-box" style="background-image: url('https://via.placeholder.com/248x320/FF0000/000000?text=Background')">
<img src="https://via.placeholder.com/248x320/FFFFFF/000000?text=Image">
</div>
</div>
Actually, they both fade at the same speed.
The out-of-sync effect you're talking about is an illusion due to the opacities overlapping.
If you set the initial opacity of both elements, it's easier to understand what's going on.
The image's faded white added to the pseudo element's faded white looks less transparent than the pseudo element's faded white alone.
See it in effect with the below image:
If you need to be convinced of their synchronization, add a transform rule to the :hover handler. the result is synced as it is supposed to be.
As a workaround, I would suggest you to try figuring out a better approach than fading overlapping elements.
You could use the <picture> tag with css object-fit property to get rid of those blank spaces.
picture doc
object-fit doc
I have an image near the top of a webpage. I've made it so that when I hover on the image, it zooms in slightly. However, in doing so, I've messed something up that causes the image to only display one portion whether hover is activated or not. I've tried removing portions of the code I added, but can't seem to fix it without completely removing the hover animation. I've also tried changing margin, padding, and position. I'm using Bootstrap 4 if that makes a difference. I'm sure it's something simple, I just can't seem to figure out what needs to be changed.
Here's a link to the Codepen: https://codepen.io/amandathedev/pen/zyEyze
Here's the relevant portion of the CSS:
.imgBox {
float: left;
position: relative;
width: 640px;
height: 360px;
margin: 0 auto;
/* justify-content: center;
display: inline-block; */
overflow: hidden;
}
.imgCard {
position: absolute;
top: 0;
left: 0;
}
.imgCard img {
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}
.imgBox:hover .imgCard img {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}
You need to set transform-origin to center so that it will scale from center on, so your css must look like this:
..other css
.imgBox:hover .imgCard img {
transform: scale(1.05);
transform-origin: center;
-webkit-transform: scale(1.05);
}
Looking at your code example on codepen, the solution looks to be making the width of the img 100%. So in your example you would do something like:
.photo {
width:100%
}
However, this cuts off the bottom of the image. You're going to need to adjust the height of the imgBox that contains the imgCard. It's currently set to 360px. Because of the way your example is written, it will probably be best for you to just choose a number so that the resulting image will have the same aspect ratio as the original image (playing around with it, 478px looks like the magic number to show the entire image).
There are several separate background images, displayed top to bottom. Is it possible to make them overlap slightly and clip a transparent triangular area in the bottom-right corner revealing the image below?
Is this possible with CSS?
Here is the desired look:
Yes, this is very possible with CSS.
Here is a technique using a rotated div and :before pseudo element. This looks like a long explanation, but the basic principal is pretty straight forward once you start poking around.
Compatibility: IE9 + and all modern browsers — The transform property in IE9 requires the -ms- prefix and Safari requires the -webkit- prefix. They should be placed before the unprefixed property.
The wrapper
The wrapper is used to clip the slanted corners of each div.
Provide a suitable max and min width
Clip its children with overflow: hidden
The div
The div is used to create the slant by clipping its childrens bottom right corner.
Rotate with transform: rotate()
Clip its children with overflow: hidden
Blow the width out with width: 200% so that the corners are clipped by the wrapper
Move every div (except the first div) up with a negative margin
Change the z-order with z-index so that each div is overlapped by the div before it
The :before pseudo element
The :before provides the actual background image without any extra markup.
Counter the div parents rotation by the same number of degrees
Provide the background image
Shift as needed with transform-origin
The straight edge is provided by the bottom edge of the image and the corner is cut off by the parent. The image must be quite large to overlap the width of its parent.
Full Example
Example with prefixes.
.wrap {
margin: 0 auto;
max-width: 1000px;
min-width: 660px;
overflow: hidden;
background: #EEE;
}
.wrap > div {
transform: rotate(-15deg);
height: 700px;
width: 200%;
overflow: hidden;
transform-origin: 0 90%;
position: relative;
z-index: 10;
}
.wrap > div:before {
content: '';
display: block;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/output/food-q-c-1500-1000-2.jpg) no-repeat;
transform: rotate(15deg);
position: absolute;
transform-origin: 30% 0;
}
.wrap > div:nth-child(n+2) {
margin-top: -140px;
}
.wrap > div:nth-child(2):before {
background-image: url(http://lorempixel.com/output/people-q-c-1500-1000-10.jpg);
}
.wrap > div:nth-child(3):before {
background-image: url(http://lorempixel.com/output/technics-q-c-1500-1000-3.jpg);
}
.wrap > div:nth-child(2) {
z-index: 9;
}
.wrap > div:nth-child(3) {
z-index: 8;
}
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>
I am trying to set a background image on an img tag. Is this possible?
My HTML:
<div id="content">
<img src="my-image.jpg" alt="image" class="img-shadow">
</div>
My CSS:
#content img {
float:right;
margin:0 0 15px 15px;
border:4px solid #ffffff;
}
.img-shadow {
background-image:url('img-shadow.png');
background-repeat:no-repeat;
background-position:0 232px;
}
Using Chrome's "Inspect Element" I can see the path to the background is correct. It's just not showing up in the browser. Below is the desired effect I am going for. By the way. the foreground image dimensions are 258x258 (with border) and the background-image dimensions are 258x40.
An image with no transparency and no padding will cover up its own background image. Images having background images do work, provided there's some gap for the background image to show through.
Adding a padding around the image will suffice, if you just want the background image to show around the image. You can then set a negative margin of the same size, if you don't like the padding taking up space.
Setting the background position to something other than 0 0 will NOT suffice; no matter what the background position is set to, the background will never extend beyond the area taken up by the element (including padding, but excluding border and margin).
Here's a solution using a container element and CSS :after
Demo fiddle
HTML
<div id="content">
<div class="img-container">
<img src="http://placehold.it/258x258" alt="image" class="img-shadow" />
</div>
</div>
CSS
#content img {
border:4px solid #ffffff;
vertical-align: top;
}
.img-container{
position: relative;
display:inline-block;
}
.img-container:after {
content: url('http://placehold.it/258x40');
display: block;
position: absolute;
top: 100%;
right: 0;
}
UPDATE
And using CSS3 box-shadow
Demo fiddle
.img-container:after {
content: '';
display: block;
position: absolute;
top: 90%;
right: 0;
height: 20px;
width: 258px;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
box-shadow: 0 10px 10px rgba(0,0,0,0.5);
z-index: -1;
}
YES you can put a background image to an image.
.your-image{
padding-bottom:18px; /* <-- height of texture image */
background:transparent /* <-- to manage some-transparent.png don't set a bgColor */
url(txtr-bottom-shadow-divider.png) /* <-- Your bottom right texture */
no-repeat /* <-- */
100% /* <-- align right */
100% /* <-- align bottom */
scroll /* <-- avoid Yoda trolling for spam abuse. Joke */;
}
You noticed the padding? It is to display the background-texture, otherwise, the image will take 100% of available space (width and height) so you won't see anything.
yup. just make sure you set some padding so the background-image will peek through; demo: http://jsfiddle.net/jalbertbowdenii/p6fm4/1/
updated fiddle by removing all the padding. to get the desired "peek" effect set the two corners you are peeking out of with a little bit of padding and the others to 0. like so: http://jsfiddle.net/jalbertbowdenii/p6fm4/5/
Yes,
Here is the easiest way to do it:
In your CSS file
body
{
background-image:url('img-shadow.png');
background-repeat:repeat-x;
background-position:center;
background-size: 100% 100%;
}
It will set it for every page of your site
You do not need to use an IMG tag for background images. It is the best form to set your background image in the css, so that you can easily layer items on top of it. With a IMG tag you need to make sure that everything you place ontop of it is absolute positioning, so it doesn't move. This is a huge pain. Good Luck
I have tried using
In HTML:
<img src="../Resources/title.png" />
In CSS:
img {
width: 200%;
height: 200%;
}
But this scales the images based on the parent tag the image is in. If an image is 150px by 150px I want to scale it to 300px by 300px. I want this to work for all images no matter their size or parent tag. And I only want to use CSS. ideas?
You can do this with the scale() 2D transform, but being one of the flashy new CSS3 features support is incomplete at this time and you need vendor prefixes:
img {
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
}
However I don't believe this takes into account the flow of content, as transforms are done on individual elements and as such do not affect layout. See also the transform-origin property.
If you need good browser support, or you need the content to reflow properly, you'll have to make do with an alternative such as using JavaScript or restructuring your HTML, such that the width and height properties will scale it correctly and affect element flow in a natural way.
You can't using CSS < Version 3 only.
When you set the width/height on an element it is relative to it's container.
Update, as it's been quite some time since this answer was posted.
As a commenter points out, this can be achieved by simply using the zoom CSS property. However, it's not recommended, as it was first implemented solely by IE, in the IE6/7 days, and never formalized into the W3C standard. Instead, what's commonly used nowadays is a CSS transform using the scale function.
More on the scale() CSS function:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
Example:
https://jsfiddle.net/2n5zLhz3/
You can enclose the image in a div and then set its size relative to the parent.
<style type="text/css">
.double{
display: inline-block;
}
.double img{
width: 200%;
}
</style>
<div class="double"><img src="../Resources/title.png"></div>
You can use min-width property on your image to force your width to be larger than its parent div, e.g.
.parent {
width: 300px;
height: 200px;
overflow: hidden;
}
img {
min-width: 200%;
/* center image */
margin-left: -50%;
height: auto;
}
<div class="parent">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Information_example_page_300px.jpg" alt=""/>
</div>
You can double the image by taking the percent you need from window size.
p > img {
width:100%;
height:60vh;
}
"height:100vh;" means 100% from your browsing window.Just have to do the math.
Use the width 110%, because it is in a div and there was extra space.
img {
height: 400px;
width: 110%;
}