There is a problem on my website. I have a video
https://drive.google.com/file/d/1MWCynYB64jxXPYpYaa3LkplrwWGf1Xko/view
It only occurs on safari.
HTML
<div class="item">
<div class="img-wrapper">
<img class='img'>
</div>
</div>
CSS
.img-wrapper {
width: 220px;
height: 220px;
border: solid 8px #ffffff;
border-radius: 110px;
overflow: hidden;
}
.img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: 0.2s;
transition: 0.2s;
border-radius: 110px;
}
.item:hover .img-wrapper img {
transform: scale(1.1);
}
It works properly (image zooms in while staying inside the border) on every other browser.
It seems a problem with transition.
.item:hover .img-wrapper img {
transform: scale(1.1);
transition: 0;
}
Related
I know this has been asked quite often, but no solution seems to apply to my situation. I imagine it's something simple that I'm not seeing. Hopefully someone can point me in the right direction.
The Problem
I have a vertical stack of icons that remain to the left of the page as one scrolls down. Everything appears to work, except that the containing divs won't shrink to their content, which prevents users from interacting with part of the interface:
Notice that the Div expands well beyond the image it contains. This interferes with selecting the radio buttons. Here's the markup:
.navStack {
display: table;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: -5%;
}
.navStack div {
width: auto;
}
.navIcons {
transition: all 0.3s ease;
width: auto;
max-Width: 10%;
max-Height: 10%;
margin: 4px 0;
-webkit-filter: brightness(100%);
filter: brightness(100%);
cursor: pointer;
display: inline-block;
}
.navIcons:hover {
transform: scale(1.5);
-webkit-filter: brightness(70%);
filter: brightness(70%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
<div class='navStack'>
<div>
<img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
<div>
<img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
</div>
Things I've tried
Display: inline-block / Display: table are the most common solutions. Placing them on 'navStack' does nothing. Placing inline-block on 'navStack div' gets me this:
Display: inline - on 'navStack' there's no response; on 'navStack div' this:
Placing a width doesn't do anything.
Inline-Flex on 'navStack div' gets the same as the above; on 'navStack' in gets me this:
width: min-content - whether it's 'navStack' or 'navStack div', the images completely disappear when applying this.
Per one comment, I've played with max-width/height in'navIcons' and added it to 'navStack div' to look like this:
.navStack div {
max-height: 10%;
max-width: 10%;
border: 1px solid;
}
.navIcons {
transition: all 0.3s ease;
width: auto;
max-width: 100%;
max-height: unset;
/* max-Width: 10%;
max-Height: 10%; */
margin: 4px 0;
-webkit-filter: brightness(100%);
filter: brightness(100%);
cursor: pointer;
display: inline-block;
}
<div class='navStack'>
<div>
<img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
<div>
<img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
</div>
Here's the result:
Progress
There has been progress thanks to the kind help of people below. With the latest CSS (last CSS above), the 'navStack div' elements are not extending anymore, however, the 'navStack' is:
The solution to this was to apply sizing to both the parent div, its children, and the images.
Specifically, I've applied to 'navStack' a 'max-Width: 10%', to 'navStack div' a max-height: 40%; and max-width: 40%;, and to 'navIcons' width: auto; max-width: 100%; max-height: unset;
The final markup looks like this:
.navStack {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: -5%;
max-width: 10%;
}
.navStack div {
max-height: 40%;
max-width: 40%;
}
.navIcons {
transition: all 0.3s ease;
width: auto;
max-width: 100%;
max-height: unset;
margin: 4px 0;
-webkit-filter: brightness(100%);
filter: brightness(100%);
cursor: pointer;
display: inline-block;
}
<div class='navStack'>
<div>
<img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
<div>
<img class='navIcons' title='Example' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
</div>
I see you've already answered your own question, but I will throw mine in nonetheless. I believe you are seeing things more complicated than they need to be.
By simply specifying the max-width on your navstack, the rest of the elements should follow when you set them to a width of 100%, giving the following markup :
.navStack {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
max-width: 10%;
}
.navStack div {
width: 100%;
}
.navIcons {
transition: all 0.3s ease;
width: 100%;
margin: 4px 0;
-webkit-filter: brightness(100%);
filter: brightness(100%);
cursor: pointer;
display: inline-block;
}
Use This Code:
<style>
.navStack {
display: table;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: 0;
}
.navStack div {
width: 40px;
}
.navIcons {
transition: all 0.3s ease;
width:100%;
margin: 4px 0;
-webkit-filter: brightness(100%);
filter: brightness(100%);
cursor: pointer;
display: inline-block;
}
.navIcons:hover {
transform: scale(1.5);
-webkit-filter: brightness(70%);
filter: brightness(70%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
</style>
HTMl:
<div class='navStack'>
<div>
<img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
<div>
<img class='navIcons' title='Definition' src="https://i.stack.imgur.com/fadxm.png" alt="" />
</div>
</div>
When sizing your image a percentage of the parent div, the div stays the same size. So if you need to shrink the size of image, change your code as follow:
.navStack {
max-width: 10%;
}
.navIcons {
width: 100%;
/* max-width: 10%; */
/* max-height: 10%; */
}
The reset of your code stays the same.
I'm having an issue with an animation on one of my images. I want the image to resize on hover with a transition time (and then have a transition time back to the original size when the mouse moves off the image) but then when i resize the window and the image resizes accordingly, it resizes with the transition time . Does anyone know a way to get around this?
<div class="column">
<a href="-----.html">
<img src="-----.jpg">
</a>
</div>
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
width:100%;
height: calc(100vh - 300px);
}
.column:hover img{
filter: brightness(0.5);
width:110%;
transform: translate(-5%,-5%);
transition: 0.6s ease;
height: calc(110vh - 300px);
}
I can see why the transition applies to the image when the window resizes, but i don't know how else to get the transition to apply when the mouse moves away. Can anyone suggest a way around this?
Gif of resizing issue
edit: full code posted below
html {
height: 100%;
}
body {
min-width: 600px;
min-height: 100%;
position: relative;
font-family: Helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #FFFFFF;
overflow-y: hidden;
}
/*Header*/
header {
background: #FFFFFF;
color: #F89828;
height: 159px;
}
header img {
margin-left: calc(50% - 122px);
margin-top: 60px;
margin-bottom: 60px;
height: 39px;
width: 244px;
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(100vh - 239px);
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(100vh - 239px);
transition: 0.6s ease;
}
.row .column:hover img {
transition: 0.6s ease;
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(110vh - 239px);
}
.centered {
color: #FFFFFF;
position: absolute;
font-size: 4em;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
}
/*footer*/
footer {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: #FFFFFF;
background-color: #808080;
font-weight: bold;
}
<body>
<header>
<img src="https://picsum.photos/400/100/?random">
</header>
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
<footer>
<p>This is where I would put some filler text, if I had any</p>
</footer>
</body>
You could set the transition on your image only when the window is hovered. This way, on resize it won't affect your element anymore, but on your element's hover and mouseout it will still be active.
/* when hovering the page */
:hover .row .column img {
transition: 0.6s ease;
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(80vh - 10px);
/* transition: 0.6s ease; [removed]*/
}
.row .column:hover img {
/* transition: 0.6s ease; [useless]*/
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(80vh - 10px);
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(60vh - 10px);
}
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
But using this solution, if mousing-out from the document itself, then the transition will also get disabled...
Unfortunately, I don't see any other solution than that, except using js of course.
(function(){
let timer;
const docEl = document.documentElement;
addEventListener('resize', e => {
clearTimeout(timer);
docEl.classList.add('resizing');
timer = setTimeout(_ => docEl.classList.remove('resizing'), 200);
});
})();
:root.resizing .row .column img {
transition: none;
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(80vh - 10px);
transition: 0.6s ease;
}
.row .column:hover img {
width: 110%;
cursor: pointer;
transform: translate(-5%, -5%);
filter: brightness(0.5);
height: calc(80vh - 10px);
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(60vh - 10px);
}
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
You need to assign width without hover for animation on mouse out, check it
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
width:35%;
}
.column:hover img{
filter: brightness(0.5);
width:110%;
transform: translate(-5%,-5%);
transition: 0.6s ease;
}
<div class="column">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>
Try this:
.container {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.icon, .icon-one, .icon-two{
position: absolute;
transition: all .5s;
transform-style: preserve-3d;
backface-visibility: hidden;
width:50px;
height:50px;
}
}
.icon-wrap .icon-one{
width:150px;
height:150px;
transform:translate(0%,0%);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.icon-wrap:hover .icon{ transform: translate(0%,0%); }
/* ::: AUTOMATED EFFECTS */
.icon-wrap .icon{
animation: icon-wrap 5s 1s infinite alternate ease-in-out;
-webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}
#keyframes icon-wrap {
0% { transform:translate(0%,0%); }
100% { transform: translate(40%,40%)scale(2);
width:150px;
height:150px;
}
}
#-webkit-keyframes icon-wrap {
0% { transform: translate(0%,0%); }
100% { transform: translate(40%,40%) scale(2);
width:150px;
height:150px; }
}
<div class="container icon-wrap">
<div class="icon">
<div class="icon-one">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>
</div>
</div>
.container {
display: inline-block;
width: 64px;
height: 64px;
perspective: 700px;
}
.icon, .icon-one, .icon-two{
position: absolute;
transition: all .5s;
transform-style: preserve-3d;
backface-visibility: hidden;
width:50px;
height:50px;
}
}
.icon-wrap .icon-one{
width:150px;
height:150px;
transform:translate(40%,40%)scale(2);}
/* ::: HOVER EFFECTS (Remove Automated for this to work) */
.icon-wrap:hover .icon{ transform: translate(40%,40%)scale(2); }
/* ::: AUTOMATED EFFECTS */
.icon-wrap .icon{
animation: icon-wrap 5s 1s infinite alternate ease-in-out;
-webkit-animation: icon-wrap 5s 1s infinite alternate ease-in-out;
}
<div class="container icon-wrap">
<div class="icon">
<div class="icon-one">
<a href="-----.html">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</a>
</div>
</div>
</div>
Try using scale(2) it's working well for me.
But you need to change translate() value as per the scale() value as per your requirement.
.column img{
filter: brightness(0.8);
transition: 0.6s ease;
}
.column:hover img{
filter: brightness(0.5);
transform: translate(50%,50%) scale(2);
transition: 0.6s ease;
}
<div class="column">
<a href="-----.html">
<img src="https://picsum.photos/300/100/?random">
</a>
</div>
Updated with your code.
html {
height: 100%;
}
body {
min-width: 600px;
min-height: 100%;
position: relative;
font-family: Helvetica;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: #FFFFFF;
overflow-y: hidden;
}
/*Header*/
header {
background: #FFFFFF;
color: #F89828;
height: 159px;
}
header img {
margin-left: calc(50% - 122px);
margin-top: 60px;
margin-bottom: 60px;
height: 39px;
width: 244px;
}
.column {
float: left;
position: relative;
text-align: center;
width: 50%;
padding: 0px;
overflow: hidden;
height: calc(100vh - 239px);
}
.row .column img {
background: #000000;
width: 100%;
filter: brightness(0.8);
height: calc(100vh - 239px);
transition: 0.6s ease;
}
.row .column:hover img {
transition: 0.6s ease;
width: 110%;
cursor: pointer;
transform: translate(-10%,-10%) scale(1.3);
filter: brightness(0.5);
height: calc(110vh - 239px);
}
.centered {
color: #FFFFFF;
position: absolute;
font-size: 4em;
font-weight: bold;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-decoration: none;
}
/*footer*/
footer {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
color: #FFFFFF;
background-color: #808080;
font-weight: bold;
}
<body>
<header>
<img src="https://picsum.photos/400/100/?random">
</header>
<div class="row">
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random">
<div class="centered">1</div>
</a>
</div>
<div class="column">
<a href="---.html">
<img src="https://picsum.photos/300/100/?random" />
<div class="centered">2</div>
</a>
</div>
</div>
<footer>
<p>This is where I would put some filler text, if I had any</p>
</footer>
</body>
Hope this was helpful for you.
I am trying to center an image on the page. I am using this:
#logo img {
max-width: 100%;
height: auto;
width: auto\9;
display: block;
margin: 55px auto;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
}
#logo img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
margin-bottom: 100px;
}
<div id="logo">
<a href="http://sapsrp.x10.bz/">
<img src="images/logo.png" alt="SAPS Logo">
</a>
</div>
I want JUST the logo to be link, not the empty space next to it. What I mean, here
Adjust your CSS like this. You need to specify the width of the image
#logo img {
display: block;
margin-top: 55px auto;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
width: 100px;
height: auto;
}
#logo img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
margin-bottom: 100px;
}
<div id="logo">
<a href="http://sapsrp.x10.bz/">
<img src="images/logo.png" alt="SAPS Logo">
</a>
</div>
If you want to maintain giving no size to the image you could remove the tag and alter the tag like this.
<img src="images/logo.png" alt="SAPS Logo" onclick='window.location="http://sapsrp.x10.bz/"'>
This is a slight hack as the user will not be able to right click to open the image in a new tab. Note, you will also need to give the img tag the cursor:pointer style
Change your css with these rules bellow
#logo {
text-align:center;
}
#logo img {
max-width: 100%;
height: auto;
width: auto;
margin: 55px auto;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
}
working fiddle https://jsfiddle.net/za5cgfLw/2/
#logo {
text-align: center;
}
#logo a {
display: inline-block;
margin: 55px auto;
}
#logo img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
}
#logo img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
margin-bottom: 100px;
}
<div id="logo">
<a href="http://sapsrp.x10.bz/">
<img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png" alt="SAPS Logo">
</a>
</div>
I have a code to make flip to a div. It's working fine in Firefox and Chrome, but in IE when the card flips, it shows the front side upside down instead of show the back side.
This is the code:
body {
background: #eee;
}
.card{
width: 300px;
height: 300px;
}
.content {
width: 300px;
height: 300px;
perspective: 500px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover .content {
transform: rotateX( 180deg ) ;
transition: transform 0.5s;
}
.front,
.back {
position: absolute;
height: 100%;
width: 100%;
background: white;
line-height: 300px;
color: #03446A;
text-align: center;
font-size: 60px;
border-radius: 5px;
backface-visibility: hidden;
}
.back {
background: #03446A;
color: white;
transform: rotateX( 180deg );
}
<div class="card">
<div class="content">
<div class="front">
Front
</div>
<div class="back">
Back!
</div>
</div>
</div>
As Shaggy commented, IE doesn't support preserve-3d. It also lacks support for backface-visibility: hidden;
So,you can not rotate the container, you have to rotate the elements individually.
And you need to adjust the visibility (with half the transition time, you want it to happen in the middle of the rotation.
This is the result, working ok on modern browsers and also on IE
body {
background: #eee;
}
.card{
width: 300px;
height: 300px;
}
.content {
width: 300px;
height: 300px;
perspective: 500px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover .content {
}
.front,
.back {
position: absolute;
height: 100%;
width: 100%;
background: white;
line-height: 300px;
color: #03446A;
text-align: center;
font-size: 60px;
border-radius: 5px;
backface-visibility: hidden;
}
.front {
transition: visibility 0.5s, transform 1s;
}
.card:hover .front {
visibility: hidden;
transform: rotateX(180deg);
}
.back {
background: #03446A;
color: white;
transform: rotateX( -180deg );
transition: visibility 0.5s, transform 1s;
}
.card:hover .back {
transform: rotateX(0deg);
}
<div class="card">
<div class="content">
<div class="front">
Front
</div>
<div class="back">
Back!
</div>
</div>
</div>
I would like to change the opacity of the img and add a 50x50 thumbnail for zoom on hover using only CSS no jquery. This is what I have done so far.
HTML code:
<div class="span4">
<a class="zoom-icon" href="#">
<img class="blackout image-1" alt="Elite Sports" src="http://www.domain.com/images/es.jpg" width="300" height="300">
</a>
</div>
CSS code:
.span4 { margin: 35px 50px; border: 5px solid #000; }
.span4:hover { border: 5px solid #ccc; }
.span4 a:hover { background: #000; }
.blackout:hover { opacity: .0; }
I have the black background on hover working but I can't figure out how to make the thumbnail show up over top of the black background "blackout". Any helpful tips would be much appreciated.
UPDATE w/Fiddle:
http://jsfiddle.net/8BMYH/
Something like this
http://jsfiddle.net/8BMYH/14/
HTML
<div class="span4"> <a class="portfolio-link-icon" href="http://www.elitesports.com"><
<img class="alignnone blackout size-full wp-image-2592" alt="Elite Sports" src="http://www.surgicalgeeks.com/wp-content/uploads/2013/04/es.jpg" width="300" height="300" />
<img class="zoom-link" src="http://www.surgicalgeeks.com/wp-content/uploads/2013/04/portfolio-link-icon.png" />
</a>
</div>
CSS
span4 {
background: #000;
margin: 35px 50px;
width: 300px !important;
height: 300px;
border: 5px solid black;
float: left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
box-shadow: 1px 1px 5px #000;
}
.span4:hover {
overflow: hidden;
border: 5px solid #8b8c8d;
border-radius: 25%;
-webkit-transform: rotate(290deg);
-moz-transform: rotate(290deg);
-o-transform: rotate(290deg);
-ms-transform: rotate(290deg);
transform: rotate(290deg);
}
.blackout:hover {
opacity: .0;
}
.zoom-link {
top: 130px;
left: 130px;
position: absolute;
visibility: hidden;
}
.span4:hover .zoom-link {
position: absolute;
visibility: visible;
}
.span4:hover .blackout {
opacity: 0;
}
You can add the thumbnail when you hover over the link using the :after pseudo-element. I created a Pen that demonstrates this: http://codepen.io/Ghodmode/pen/xFmqf
This isn't an ideal solution, but it is entirely CSS. It would be better if I could get the value of the src attribute from the image and use that as the background url using the attr() (http://www.w3.org/TR/css3-values/#attr) CSS function, but I couldn't get that to work.
.span4 a.zoom-icon {
position: relative;
}
.span4 a.zoom-icon:hover:after {
content: "";
display: block;
position: absolute;
width: 50px;
height: 50px;
bottom: 10px;
right: 10px;
background-color: black;
background-image: url("http://bit.ly/XioiVs");
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}