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>
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 trying to add a scale effect to the images that are available on the first part of my website: http://www.esportbooks.com/esports-news/
In fact, I already made this effect on the "News" section that is just below, if you hover over the images the effect is already in place and I use CSS to create it.
The only thing is that I don't know how to get the exact name of the CSS style to replicate this effect on the first 3 images, I tried several things but none of them work.
Could someone help me to find out?
Probably what are you looking for is the css property transform: scale()
you could check the example bellow:
*, *::before, *::after{
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
html, body{
margin: 0px;
padding: 0px;
font-size: 18px;
font-weight: 300;
height: 100%;
color: #fff;
}
.container{
width: 1024px;
max-width: 100%;
margin: auto;
display: block;
text-align: center;
}
figure{
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
display: inline-block;
vertical-align: top;
border: 5px solid #fff;
box-shadow: 0 0 5px #ddd;
margin: 1em;
}
figure img{
transition: all .3s ease-in-out;
transform: scale(1);
}
figure:hover img{
transform: scale(1.2);
}
<div class="container">
<figure>
<img src="http://placeimg.com/400/300/any" alt="Thumb" width="400" height="300" />
</figure>
<figure>
<img src="http://placeimg.com/400/300/nature" alt="Thumb" width="400" height="300" />
</figure>
</div>
Add this CSS code in your css file:
.fusion-image-wrapper {
transform: scale(1);
-webkit-transform: scale(1);
transition: all .5s;
-webkit-transition: all .5s;
}
.fusion-post-wrapper:hover .fusion-image-wrapper {
transform: scale(1.7);
-webkit-transform: scale(1.7);
}
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;
}
On hover, the scale transform starts to overlap the other pictures in it's row. I'm not sure how to prevent this and just have the scale stay within it's own picture.
HTML
<div id="pictures">
<img src="/pic1.jpg"/>
<img src="/pic2.jpg"/>
<img src="/pic3.jpeg"/>
</div>
CSS
#pictures {
text-align: justify;
overflow: hidden;
}
#pictures img {
display: inline-block;
width: 350px;
height: 350px;
}
#pictures:after {
content: '';
display: inline-block;
width: 100%;
}
#pictures img {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: .9s ease-in-out;
transition: .9s ease-in-out;
}
#pictures img:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
How can I make the image inside of this div scale without the actual div scaling on hover? So I only want the image to get zoomed on.
Here is the code:
<div id="container">
<img id="image" src="some-image">
</div>
Use transform: scale
#container {
display: inline-block;
margin: 20px;
border: 1px solid black;
overflow: hidden; /* clip the excess when child gets bigger than parent */
}
#container img {
display: block;
transition: transform .4s; /* smoother zoom */
}
#container:hover img {
transform: scale(1.3);
transform-origin: 50% 50%;
}
<div id="container">
<img id="image" src="https://via.placeholder.com/150">
</div>
a little bit elegant solution with transition effects
#container {
display: inline-block;
overflow: hidden;
}
#container img {
display: block;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#container:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
<div id="container">
<img id="image" src="https://via.placeholder.com/200">
</div>