I am new in HTML, CSS. I want to have hover effect on an image in my website. The code is kind of working. However, when it ease out it is not as smooth as when it get enlarged. I want a smooth transition in both ways. Here I submit my css and html code. There is a big chance many things are wrongly or inefficiently used here. It would be really great if someone can help me out with this.
CSS
.about .block h2 {
padding-top: 35px;
padding-bottom: 20px;
margin: 0;
}
.about .block h4 {
font-size: 20px;
text-align: justify;
}
/*----------------------*/
.about .block img {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 50%;
}
.about .about-img {
overflow: hidden;
}
.about .about-img:hover img {
-webkit-transform: scale3D(1.1, 1.1, 1);
transform: scale3D(1.1, 1.1, 1);
}
.about .about-img img {
opacity: 1;
transition: all 0.2s ease-in-out;
}
.effect {
border: none;
margin: 0 auto;
}
.effect:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
HTML
<section class="about">
<div class="container">
<div class="row">
<div class="col-md-7 col-sm-12">
<div class="block">
<div class="section-title">
<h2>ABOUT X</h2>
</div>
<h4> Here I will write some text next to the circular image. I want enlarged picture when mouse hover over on the image.
</h4>
</div>
</div>
</div>
<!-- .col-md-7 close -->
<div class="col-md-5 col-sm-12">
<div class="block">
<img class="effect" src="image.jpg" alt="Img">
</div>
</div>
<!-- .col-md-5 close -->
</div>
</div>
</section>
I think your problem lies on .effect class
You should have include the transition property on your .effect class
.effect {
border: none;
margin: 0 auto;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
That should do the transition when leaving your hover state.
I have an icon on the top left as shown in the image below:
When I hover over it I would like the side menu (unhidden at the moment) to display, by sliding out and then back in again once off hover, however I'm having trouble getting the css to work.
The problem piece is:
#nuke_logo > a:hover:nth-child(1) + #nukeSideMenu, #nukeSideMenu:Hover{}
I've even tried changing something simple like the background color and it's still not working. Must be the syntax, but, I've tried multiple things without success. Can someone see the issue?!
html snippet:
<div id="nuke_logo" class="col-xs-12 col-sm-2">
<a id="nuke_icon" href="/">
<img src="/Images/Nuclei/nuclei_md.png">
</a>
<a class="" href="/">Nuclei</a>
<nav id="nukeSideMenu" role="navigation">
<div>
<ul id="side-menu" class="nav">
<li>
<a id="lm_CSM" class="">
<img alt="CSM" src="/Images/LauncherButtons/CSM_Launcher.png">
<span class="menu-title">Customer Services</span>
</a>
</li>
<li>
<a id="lm_ADMIN" class="">
<img alt="ADMIN" src="/Images/LauncherButtons/ADMIN_Launcher.png">
<span class="menu-title">Administration</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
css snippet:
<style>
#nuke_logo {
position:relative;
background:#dbdbdb;
}
#nuke_logo a:nth-child(1) {
text-decoration: none;
}
#nuke_logo > a:nth-child(1) img {
width: 32px;
height: 32px;
vertical-align:top;
margin: 10px 5px 1px 0;
background:#dbdbdb;
-webkit-transition:
-webkit-transform 0.4s ease-in-out;
-moz-transition:
-moz-transform 0.4s ease-in-out;
-o-transition:
-o-transform 0.4s ease-in-out;
-ms-transition:
-ms-transform 0.4s ease-in-out;
transition:
transform 0.4s ease-in-out;
}
#nuke_logo > a:hover:nth-child(1) img {
text-decoration: none;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
#nuke_logo a:nth-child(2) {
color: #525252;
font-family: "Righteous",cursive;
display: inline;
font-size: 20px;
line-height: 50px;
}
#nuke_logo a:nth-child(2):hover {
text-decoration: none;
}
#nuke_logo > a:hover:nth-child(1) + #nukeSideMenu, #nukeSideMenu:Hover {
width: 55px;
overflow: auto;
}
#nukeSideMenu {
display: block;
position: absolute;
width: 0px;
overflow: hidden;
z-index: 1;
top: 50px;
left: 0;
transition-timing-function: ease;
-moz-transition-timing-function: ease;
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-property: width;
-moz-transition-property: width;
-webkit-transition-property: width;
-o-transition-property: width;
transition-duration: 2s;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
-o-transition-duration: 2s;
}
</style>
I've created a working fiddle based on your code
https://jsfiddle.net/y7vufxh8/
instead of #nuke_logo > a:hover:nth-child(1) you just need #nuke_logo a:hover
also changing width on hover looks bad, use translate3d for nice smooth animations
#nuke_logo a:hover + #nukeSideMenu, #nukeSideMenu:hover {
transform: translate3d(0,0,0);
overflow: auto;
}
#nukeSideMenu {
display: block;
position: absolute;
width: 50%;
overflow: hidden;
z-index: 1;
top: 50px;
left: 0;
transform: translate3d(-50%,0,0);
transition: 1s ease-in-out;
}
Since you want both your icon and your "Nuclei" label to link to the root of your application, I would recommend that you combine those two items inside one anchor link. That way you can use the hover effect on that link to open your menu below with the CSS sibling selector.
// Change this:
<a id="nuke_icon" href="/">
<img src="/Images/Nuclei/nuclei_md.png">
</a>
<a class="" href="/">Nuclei</a>
<nav id="nukeSideMenu" role="navigation">...
// To this:
<a id="nuke_icon" href="/">
<img src="/Images/Nuclei/nuclei_md.png" />
<h1>Nuclei</h1>
</a>
<nav id="nukeSideMenu" role="navigation">...
Now we will be able to use the hover on #nuke_icon to make the menu appear.
// Add this to your styles for #nukeSideMenu
#nukeSideMenu {
transform: translateX(-100%);
}
// And create this new rule for the hover on the icon with the sibling selector
#nuke_icon:hover + #nukeSideMenu {
transform: translateX(0);
}
If you're hoping to use just CSS then I believe adding this to your stylesheet should do the trick.
#nuke_logo:hover #nukeSideMenu {
width: 55px;
}
I have a header with two divs. The two divs are next to each other. I'm using bootstrap with flex box for this. I want to create a sliding effect (and zoom) when hovering over the divs. Hovering over the left div should change the width of both the left and right div.
Tricky part I'm having is that I want to add a diagonal line with the same color as the right div to create a nice look. I've tried creating that with a pseudo after on the right div but the issue is when hovering it will not move with the rest of the div. I had to give it position: absolute to display it outside the right div.
Maybe I'm doing something wrong or maybe there is a better solution. I haven't figured this one out yet.
JSfiddle
https://jsfiddle.net/aq9Laaew/235971/
.header {
z-index: 1;
height: 50vh;
position: relative;
overflow: hidden;
}
.header-img {
width: 60vw;
height: 50vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(asset_path("bgs/bg-1.jpg"));
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
}
.header-img:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
width: 80vw;
}
.header-content {
color: #000000;
background-color: #FFFFFF;
width: 40vw;
height: 50vh;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
overflow-x: visible;
}
.header-content:hover {
width: 80vw;
}
.overlay::after {
content: " ";
display: inline-block;
position: absolute;
width: 20%;
height: 100%;
left: 50%;
border-style: dashed;
border-width: 1em;
border-color: #000000;
}
<div class="header d-flex flex-row">
<div class="header-img"></div>
<div class="header-content">
<div class="overlay"></div>
<div class="d-flex justify-content-center">
<div class="mt-5">
<div class="text-center header-text">
<h2>Text</h2>
</div>
</div>
</div>
</div>
</div>
After some investigation I've fixed the sliding effect of the overlay. I've appended the div.overlay inside the header-content and set postion:relative on .header-content class.
.header {
z-index: 1;
height: 50vh;
position: relative;
overflow: hidden;
}
.header-img {
width: 60vw;
height: 50vh;
background-position: 75% 50%;
background-color: #EFEFEF;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
}
.header-img:hover {
transform: scale(1.1);
width: 100vw;
}
.header-content {
position: relative;
color: #000000;
background-color: #FFFFFF;
width: 40vw;
height: 50vh;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
overflow-x: visible;
}
.header-content:hover {
width: 80vw;
}
.content-text {
position: absolute;
left: -2%;
}
.overlay::after {
content: " ";
display: inline-block;
position: absolute;
width: 70%;
height: 200%;
left: -35%;
top: -60%;
background-color: #FFFFFF;
transform: rotate(10deg);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header d-flex flex-row">
<div class="header-img"></div>
<div class="header-content">
<div class="overlay"></div>
<div class="d-flex justify-content-center">
<div class="mt-2">
<div class="text-center content-text">
<h3>text</h3>
</div>
</div>
</div>
</div>
</div>
I have this piece of HTML (placed on CSSDesk):
<section style="margin-top: 50px;">
<header style="margin-bottom: 30px;">My checkboxes</header>
<div class="checkbox">
<input type="checkbox" id="checkbox"/>
<label for="checkbox"></label>
</div>
</section>
And this piece of CSS, also placed on CSSDesk:
input[type="checkbox"]{
display: none;
}
.checkbox{
position: relative;
width: 60px;
height: 2px;
background-color: black;
border-radius: 10%;
}
.checkbox input[type="checkbox"] + label{
top: -10px;
cursor: pointer;
position: absolute; /*otherwise ,,left: x px;" isn't working*/
display: block;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: blue;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.checkbox input[type="checkbox"]:checked + label{
left: 80%;
}
Impressed by Paul Underwood checkboxes I follow his tutorial: How To Style A Checkbox With CSS. Unfortunately, transition (I copied in 100% from tutorial) didn't work. And I don;t have any idea why. Here is my entire code, placed in CSS Desk: CSS Desk Decorative checkboxes. I will be pleased if anybody decides to help me - thank you in advance. My browser - Opera 25.0
You forgot to insert left: 0px in .checkbox label{...} class , because you expect that transition will be applied to transformation in x-Axis. Here is a working snippet.
input[type="checkbox"] {
display: none;
}
.checkbox {
position: relative;
width: 60px;
height: 2px;
background-color: black;
border-radius: 10%;
}
.checkbox label {
/*insert next line*/
left: 0px;
top: -10px;
cursor: pointer;
position: absolute;
/*otherwise ,,left: x px;" isn't working*/
display: block;
width: 20px;
height: 20px;
border-radius: 100%;
background-color: blue;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.checkbox input[type="checkbox"]:checked + label {
left: 80%;
}
<section style="margin-top: 50px;">
<header style="margin-bottom: 30px;">My checkboxes</header>
<div class="checkbox">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div>
</section>
I'm currently trying to create a zoom effect on hover over one of my four images. The problem is most examples usually use tables or mask divs to apply some sort of effect.
Here's one example that implements what I would like this.
This is my code so far.
HTML
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
</div>
CSS
#menu {
max-width: 1200px;
text-align: center;
margin: auto;
}
#menu img {
width: 250px;
height: 375px;
padding: 0px 5px 0px 5px;
overflow: hidden;
}
.blog {
height: 375px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blog:hover {
cursor: pointer;
height:475px;
width: 350px;
}
.music {
height: 375px;
}
.projects {
height: 375px;
}
.bio {
height: 375px;
}
What about using CSS3 transform property and use scale which ill give a zoom like effect, this can be done like so,
HTML
<div class="thumbnail">
<div class="image">
<img src="http://placehold.it/320x240" alt="Some awesome text"/>
</div>
</div>
CSS
.thumbnail {
width: 320px;
height: 240px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Here's a demo fiddle. I removed some of the element to make it simpler, you can always add overflow hidden to the .image to hide the overflow of the scaled image.
zoom property only works in IE
Here you go.
Demo
http://jsfiddle.net/27Syr/4/
HTML
<div id="menu">
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
</a>
</div>
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="blog" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
</a>
</div>
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
</a>
</div>
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="blog" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
</a>
</div>
</div>
CSS
#menu {
text-align: center; }
.fader {
/* Giving equal sizes to each element */
width: 250px;
height: 375px;
/* Positioning elements in lines */
display: inline-block;
/* This is necessary for position:absolute to work as desired */
position: relative;
/* Preventing zoomed images to grow outside their elements */
overflow: hidden; }
.fader img {
/* Stretching the images to fill whole elements */
width: 100%;
height: 100%;
/* Preventing blank space below the image */
line-height: 0;
/* A one-second transition was to disturbing for me */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease; }
.fader img:hover {
/* Making images appear bigger and transparent on mouseover */
opacity: 0.5;
width: 120%;
height: 120%; }
.fader .text {
/* Placing text behind images */
z-index: -10;
/* Positioning text top-left conrner in the middle of elements */
position: absolute;
top: 50%;
left: 50%; }
.fader .text p {
/* Positioning text contents 50% left and top relative
to text container's top left corner */
margin-top: -50%;
margin-left: -50%; }
Suggestion
Instead of .fader { inline-block; } consider using some grid system. Based on your technology of preference, you can go Foundation, Susy, Masonry or their alternatives.
.aku {
transition: all .2s ease-in-out;
}
.aku:hover {
transform: scale(1.1);
}
I like using a background image. I find it easier and more flexible:
DEMO
CSS:
#menu {
max-width: 1200px;
text-align: center;
margin: auto;
}
.zoomimg {
display: inline-block;
width: 250px;
height: 375px;
padding: 0px 5px 0px 5px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
transition: all .5s ease;
}
.zoomimg:hover {
cursor: pointer;
background-size: 150% 150%;
}
.blog {
background-image: url(http://s18.postimg.org/il7hbk7i1/image.png);
}
.music {
background-image: url(http://s18.postimg.org/4st2fxgqh/image.png);
}
.projects {
background-image: url(http://s18.postimg.org/sxtrxn115/image.png);
}
.bio {
background-image: url(http://s18.postimg.org/5xn4lb37d/image.png);
}
HTML:
<div id="menu">
<div class="blog zoomimg"></div>
<div class="music zoomimg"></div>
<div class="projects zoomimg"></div>
<div class="bio zoomimg"></div>
</div>
DEMO 2 with Overlay
Simply:
.grow { transition: all .2s ease-in-out; }
This will allow the element to assign an animation via css.
.grow:hover { transform: scale(1.1); }
This will make it grow!
.item:hover img
{
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
this way you can zoom any image with simple animation. If you need a complete tutorial here is a official tutorial: http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php
SOLUTION 1: You can download zoom-master.
SOLUTION 2: Go to here .
SOLUTION 3: Your own codes
.hover-zoom {
-moz-transition:all 0.3s;
-webkit-transition:all 0.3s;
transition:all 0.3s
}
.hover-zoom:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.5)
}
<img class="hover-zoom" src="https://i.stack.imgur.com/ewRqh.jpg"
width="100px"/>
<div class="item">
<img src="yamahdi1.jpg" alt="pepsi" width="50" height="58">
<img src="yamahdi.jpg" alt="pepsi" width="50" height="58">
<div class="item-overlay top"></div>
css:
.item img {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
just want to make a note on the above transitions only need
-webkit-transition: all 1s ease; /* Safari and Chrome */
transition: all 1s ease;
and -ms- certainly doenst work for IE 9 i dont know where you got that idea from.
.img-wrap:hover img {
transform: scale(0.8);
}
.img-wrap img {
display: block;
transition: all 0.3s ease 0s;
width: 100%;
}
<div class="img-wrap">
<img src="http://www.sampleimages/images.jpg"/> // Your image
</div>
This code is only for zoom-out effect.Set the div "img-wrap" according to your styles and insert the above style results zoom-out effect.For zoom-in effect you must increase the scale value(eg: for zoom-in,use
transform: scale(1.3);
#import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,700&subset=latin-ext');
body{ font-family: 'Muli', sans-serif; color:white;}
#lists {
width: 350px;
height: 460px;
overflow: hidden;
background-color:#222222;
padding:0px;
float:left;
margin: 10px;
}
.listimg {
width: 100%;
height: 220px;
overflow: hidden;
float: left;
}
#lists .listimg img {
width: 350px;
height: 220px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#lists:hover{cursor: pointer;}
#lists:hover > .listimg img {
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
-webkit-filter: blur(5px);
filter: blur(5px);
}
#lists h1{margin:20px; display:inline-block; margin-bottom:0px; }
#lists p{margin:20px;}
.listdetail{ text-align:right; font-weight:200; padding-top:6px;padding-bottom:6px;}
<div id="lists">
<div class="listimg">
<img src="https://lh3.googleusercontent.com/WeEw5I-wk2UO-y0u3Wsv8MxprCJjxTyTzvwdEc9pcdTsZVj_yK5thdtXNDKoZcUOHlegFhx7=w1920-h914-rw">
</div>
<div class="listtext">
<h1>Eyes Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>Click for More Details...</p>
</div>
</div>
<div id="lists">
<div class="listimg">
<img src="https://lh4.googleusercontent.com/fqK7aQ7auobK_NyXRYCsL9SOpVj6SoYqVlgbOENw6IqQvEWzym_3988798NlkGDzu0MWnR-7nxIhj7g=w1920-h870-rw">
</div>
<div class="listtext">
<h1>Two Frogs Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>More Details...</p>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<style>
.zoom {
overflow: hidden;
}
.zoom img {
transition: transform .5s ease;
}
.zoom:hover img {
transform: scale(1.5);
}
</style>
</head>
<body>
<h1>Image Zoom On Hover</h1>
<div class="zoom">
<img src="/image-path-url" alt="">
</div>
</body>
</html>
Add jQuery JavaScript library together with the jquery.zbox.css and jquery.zbox.js to your webpage.
<link rel="stylesheet" href="jquery.zbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.zbox.min.js"></script>
Add a group of thumbnails with links pointing to the full sized images into the webpage.
<a class="zb" rel="group" href="1.png" title="Image 1">
<img src="thumb1.png">
</a>
<a class="zb" rel="group" href="2.png" title="Image 2">
<img src="thumb2.png">
</a>
<a class="zb" rel="group" href="3.png" title="Image 3">
<img src="thumb3.png">
</a>
Call the function on document ready. That's it.
In the view source do:
$(".zb").zbox();