I want to style a metro-like gallery. I already achieved this in an example with background-images:
http://codepen.io/DanielCoding/pen/jlrgv
But I want to replace the background-images by ordinary image-tags in divs. Unfortunately all images are stretching themselves in the bottom-right direction:
http://codepen.io/DanielCoding/pen/fsKjE/
In the first code I resolved this by give the images different background-position values, but I don't know a similar command for simple image tags or divs.
You could use transform to scale the image and transform-origin to control the direction of the scale.
.star1:hover,
.star2:hover,
.star3:hover,
.star4:hover {
-webkit-transition: -webkit-transform 0.2s;
-webkit-transform: scale(1.2);
}
.star1:hover {
-webkit-transform-origin: bottom right;
}
.star2:hover {
-webkit-transform-origin: bottom left;
}
.star3:hover {
-webkit-transform-origin: top right;
}
.star4:hover {
-webkit-transform-origin: top left;
}
http://codepen.io/anon/pen/oxsge/
The most similar technique to "background-position" that you can use with simple images is "CLIP". Please, look at link in order to understand more about it.
I've replaced the background-images with simple img and check this out if this is what your looking for.
star1,
.star2,
.star3,
.star4{
background-size: 150px;
background-repeat: no-repeat;
background-clip: border-box;
transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
display: inline-block;
text-decoration: none;
cursor: pointer;
padding:0;
margin:0;
}
.star1:hover,
.star2:hover,
.star3:hover,
.star4:hover{
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
Pen here
Related
So, I was trying to get an image to, when hovered over, spin 360 degrees and scale up by 1.4, all with its centre staying in place. I tried this:
.logo img[data-v-4fbac4e1] {
width: 50px;
height: 50px;
content: url(https://i.imgur.com/txz1IXI.png);
transition: width 2.0s, height 2.0s, transform 2.0s;
}
with this:
.logo img[data-v-4fbac4e1]:hover{
width: 65px;
height: 65px;
transform: rotate(360deg);
}
and it works fine, but it moves off-centre as it expands. How do I make sure the width and height increase from the centre so it stays in the same place? Sorry if this seems elementary, I'm new to CSS.
Edit: the part of the HTML I'm using looks like this:
<a data-v-4fbac4e1 href="/home" class="logo">
<img data-v-4fbac4e1 src="/img/icons/icon.svg">
</a>
If more is required I can add it, but this is the HTML for the image I'm trying to transform.
Since I'm not entirely sure what you mean, point to which is your culprit and we'll get you sorted out but here's some examples of the differences between techniques.
img, div {
display: inline-block;
margin: 1rem;
height: 10rem;
width: 10rem;
}
.fancy-img1, .fancy-img3 {
object-fit: cover;
outline: red 2px solid;
}
.fancy-img2, .fancy-img4 {
background: url(https://picsum.photos/200) no-repeat center center / cover;
outline: blue 2px solid;
}
/* grow by height value change transition */
.fancy-img1 {
transition: transform .5s, height .5s;
}
.fancy-img2 {
transition: transform .5s, height .5s;
}
.fancy-img1:hover, .fancy-img2:hover {
transform: rotate(360deg);
height: 15rem;
}
/* Scale with transition */
.fancy-img3 {
transition: transform .5s;
}
.fancy-img3:hover {
transform: scaleY(1.5) rotate(360deg);
}
/* Scale with keyframes */
#keyframes spinGrow {
to { transform: scaleY(1.5) rotate(360deg); }
}
.fancy-img4:hover {
animation: spinGrow .5s forwards;
}
<h2>Are you talking about transition height which cause the jumpy effect?</h2>
<img class="fancy-img1" src="https://picsum.photos/200">
<div class="fancy-img2"></div>
<h2>Or actually scale so it remains in its original position?</h2>
<img class="fancy-img3" src="https://picsum.photos/200">
<div class="fancy-img4"></div>
I have html like this:
<div class="projectThumb">
<div class="textContainer">
<h1>Header1</h1>
<h2>▪ Header2a ▪ Header2b ▪</h2>
</div>
<a class="project1 video" href="https://player.vimeo.com/video/xxxxxx?transparent=0"><img src="Thumbnails/project1.png"></a>
</div>
Clicking the <a> tags with class="video" trigger a JS plugin that opens a video player within the page.
My CSS looks like this:
.projectThumb img {
width: 100%;
height: 100%;
object-fit: cover;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.projectThumb img:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.2)";
filter: alpha(opacity=0.2);
opacity: 0.2;
}
When you hover over the <img> within the <a> (which takes up the whole projectThumb), the <img> opacity decreases revealing the text, but the image still bleeds through the text because the image is still on top of it. Is there a way to change the z-index of one of the elements to avoid having it bleed through? I've tried adding the following to CSS:
.projectThumb a:hover {
z-index: -999;
}
I've also tried adding z-index to .projectThumb img:hover like this:
.projectThumb img:hover {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.2)";
filter: alpha(opacity=0.2);
opacity: 0.2;
z-index: -999;
}
Neither work. I can bring the text to the front by setting the z-index of .textContainer h1, .textContainer h2, .textContainer h3, which does bring the text to the front, but I don't know how to trigger that on projectThumb img:hover so that it's only on top of the image on hover. I'd also like the entire <div> to remain clickable, even the text portion. When I bring the text to the front using z-index, the text area isn't clickable because it's on top of the <a>.
Not sure if its anywhere else in the CSS but I don't see any positioning.
In order for z-indexing to work you need to have some sort of position set.
Add position: relative to any of the classes you want to apply z-indexing to.
.projectThumb a, .projectThumb img {
position: relative;
}
If you really want to use z-index for that, you may use variables:
:root {
--thumbIndex: 0;
}
.projectThumb {
z-index: var(--thumbIndex);
}
a:hover {
--thumbIndex: -999;
}
I think thou, better idea will be to use the display property instead.
Code: https://jsfiddle.net/xakhLafd/
Hello,
I'm trying to have an image enlarge on hover and use an ease transition. It works, but it seems to bug out sometimes. I tried to fix this by setting:
-webkit-transition-property: height,width;
But to no avail. Also, I'm trying to understand how the author of this code (I got some of the code from a CSS blog) achieves this. I understand how on hover the image changes its width, but I'm not sure why the author is setting negative top and left values. I have been trying to edit the width, height, top, and left to get the desired size on hover, but it seems to become skewed - probably because I don't understand what the negative top and left values are doing. Can anyone shine some light on this? I've read some articles on negative margins, but I don't understand what's being done here.
Here's the code:
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
.thumbnail{
width: 100px;
height: 100px;
}
.thumbnail:hover {
position:relative;
top:-50px;
left:-35px;
width:500px;
height:auto;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
The top:-50px; left:-35px; rule in CSS is used to keep the image's center-point unchanged after it is enlarged. Otherwise, when image is enlarged, you will feel it is moved to right-bottom side.
However, this is not a good design -- width/height change requires calculating new layout and redraw UI elements on every animation frame, which is very expensive (you can check this SO for difference between repaint and reflow). That's why you feel "it seems to bug out sometimes."
A better way is using transform. Please check the jsfiddle that fix the issue. The new CSS code is:
.thumbnail{
width: 100px;
height: 100px;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
.thumbnail:hover {
transform: scale(5);
}
Here is the fiddle I created that fixes the issue. I got rid of position relative and set the height to auto instead of 100px.
here is the code i did.
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg"
class="thumbnail"/>
.thumbnail{
width: 100px;
height: auto;
position:relative;
}
.thumbnail:hover {
width:500px;
height:auto;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
Sorry forgot to update the fiddle here is the new link.
https://jsfiddle.net/xakhLafd/1/
If you want something simple, this is code I'm working on atm:
.box img {
margin: 1rem auto;
border: 2px solid white;
cursor: pointer;
transition: all .5s ease;
}
.box img:hover {
border-radius: 10px;
transform: scale(1.5);
}
I have a wordpress website and I'd like to add some features that my current theme doesn't offer. I'd like the 3 images in the "Pages" section to reduce in size or switch to a different image (same content, smaller resolution) so as to appear smaller then you hover over it. I've managed to accomplish this with a custom HTML page, adding ID's to the images and then adding a version of this to my style.css for each image
#techbutton {
display: block;
width: 125px;
height: 125px;
background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo21-e1445171629993.png") no-repeat 0 0;
}
#techbutton:hover {
background: url("http://rafsk.co.uk/wp-content/uploads/2015/10/Logo2-hover-e1445296643552.png") no-repeat 0 0;
}
#techbutton span {
position: absolute;
top: -999em;
}
After uploading the custom HTML to my server I realised that instead of just overriding the homepage of rafsk.co.uk it also overrode the homepages of all my subdomains.
So how can I do this?
You could do this with a css transform, that would be the easiest way, and you can apply it to all three with a class instead of an id (which should only be used once per page):
So first give the same class to all of the images (meaning to the actual image tag, like <img class="imageclass" src="blah.png" />), and use this in your css:
.imageclass {
display: block;
width: 125px;
height: 125px;
transform: scale(1,1);
}
.imageclass:hover {
transform: scale(0.9,0.9);
}
You could then add a css transition effect if you want it to be smoother:
.imageclass {
display: block;
width: 125px;
height: 125px;
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
.imageclass:hover {
transform: scale(0.9,0.9);
}
Here is a working example:
https://jsfiddle.net/f9teea7L/
ALTERNATIVE OPTION #1:
If you can't edit the HTML and can only get an image into the div through the background, you could try adding a background-size property like this. Be aware though that it won't work in IE 8 or lower:
#techbutton {
display: block;
background-image: url('http://vignette1.wikia.nocookie.net/deadliestfiction/images/d/d5/2138464123_1360632315.jpg/revision/latest?cb=20140513035922');
background-size: 100%,100%;
width: 125px;
height: 125px;
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
#techbutton:hover {
transform: scale(0.9,0.9);
}
Working Example: https://jsfiddle.net/azx962a9/
ALTERNATIVE OPTION #2:
I've looked at your site though and if I'm understanding what you want to do, it seems to me that simply adding this to your css should work...:
.service-icon {
transform: scale(1,1);
transition: transform 0.6s ease-in-out;
}
.service-icon:hover {
transform: scale(0.9,0.9);
}
I have an un-ordered list of 12 images in 3 colons x 4 rows gallery.
When hovered a tranform scale is applied.
How can i set the transform origin for (3n+1) images ( images 1-4-7-10 ) to LEFT
and for 3nth (3 -6-9-12)element to RIGHT?
Im tryng to enter the html and the css here, but got error messages.
You didn't specify the y value desired for your transform origin (so I suppose is 0), but if you're applying the scale to the images this should work (add prefixes for specific vendors)
li:nth-child(3n+1) img {
transform-origin : 0 0;
}
li:nth-child(3n) img {
transform-origin : 100% 0;
}
This is the code and how i think to get it formatted by css.
I put a draft working example on the site vsio.ru.
I want the first fourth seveth .... (3n+1)image when hovered been 2 times bigger [tranform:scale(2)]
and transform origin set to left and third 6-th 9-th......(3n) a transform origin set to right.
( IS IT POSSIBLE A APPLY A PSEUDO CLASS( HOVER) TO A PSEUDO ELEMENT (NTH-CHILD)? AND HOW? )
`
section#gallery{
Width:670px;
}
section#gallery ul li{
display:inline;}
section#gallery ul li img{
width: 215px;
height:150px;
border: 2px solid #fff;
margin: 5px 0px 0px 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
}
section#gallery ul li img:hover {
-webkit-transform:scale(2) ;
-moz-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-box-shadow:1px 1px 2px 1px #999999;
}
`