I have outer div section and within outer div i have inner div section on mouse hover i want only outer div section should be transition and inner div section text should not transit should remain constant somebody help me out in achieving it.
Thanks!
http://jsfiddle.net/zeYZL/56/
HTML
<div class="outer">
<div class='inner'>
<p>inner text</p>
</div>
</div>
CSS
.outer
{
width:283px;
height:298px;
float:left;
background:#101820;
color:#fff;
font-family:Lato;
font-weight:900;
font-size:3.4em;
text-align:center;
line-height:298px;
transition:all 0.3s ease;
}
.outer:hover
{
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.03);
width:283px;
height:298px;
cursor:pointer;
background-color:#ffa300;
}
when a transform is applied to the parent the child gets affected automatically and even adding transform: none to the child will have no effect. So, the best approach is to add the transform to a absolutely positioned sibling
I have used a :pseudo element :after to add a background-color and added scale to it which will prevent the child from getting scaled
.outer {
width: 283px;
height: 298px;
float: left;
color: #fff;
position: relative;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
}
.outer:after {
content: '';
background: #101820;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: all 0.3s ease;
z-index: -1;
}
.outer:hover:after {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.03);
cursor: pointer;
background-color: #ffa300;
}
<div class="outer">
<div class='inner'>
<p>inner text</p>
</div>
</div>
Along with other css add the following for inner div.
.inner:hover {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
You can mix it with jquery too.
Related
I have a css transition so that when someone hovers over an image, the h2 will grow. It does kind of work, but the in addition to growing the h2 is also moving across the div. This has never happened to me before and I can't figure out why. You can see it's behavior here, if you scroll to the bottom of the page and hover over Our Story and Our Team: https://katherinemade.com/staging/mission-vision-values/
Here is my html:
<div class="img-relative-position">
<h2 class="over-image-text">Our Story</h2>
<img />
</div>
And my css:
.img-relative-position {
position: relative;
}
.over-image-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-relative-position h2 {
transition: all .2s ease-in-out;
}
.img-relative-position:hover h2 {
transform: scale(1.5);
}
Does anyone know what could be causing my h2 to move vertically across the div, and how I can keep it center but still grow?
You can do like this
.img-relative-position {
position: relative;
}
.over-image-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.img-relative-position h2 {
transition: all .2s ease-in-out;
}
.img-relative-position:hover h2 {
transform: scale(1.5);
}
<div class="img-relative-position">
<div class = "over-image-text"> //new div
<h2 class="over-image-text-cstm">Our Story</h2>
</div>
<img />
</div>
i think you should scale a "parent" Container so if you create something like this
<div class="img-relative-position"> // <-- the Image
<div class="scale-this-on-hover"> // <-- new container this one has to be scaled
<h2 class="over-image-text">Our Story</h2>
<img />
</div>
</div>
No need To add scale property to increase text size
.img-relative-position:hover h2 {
/* transform: scale(1.5); */ // Remove This Line
font-size: 60px; // Add font-size
}
Thanks
I think you are missing transform-origin: center on h2. I have made a snippet for you. Have a look.
Thanks me later.
* {
box-sizing: border-box;
}
.wrap {
margin: 40px;
width: 300px;
height: 200px;
line-height: 200px;
background: green;
color: #fff;
text-align: center;
}
.wrap h2 {
transition: .3s ease;
transform-origin: center center;
}
.wrap:hover h2 {
transform: scale(1.5);
}
<div class="wrap">
<h2>Hello Test</h2>
</div>
For Extra Hover Effect You Can use This Css I Hope You Like It :)
.img-relative-position {
position: relative;
overflow: hidden;
}
.over-image-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 2;
transition: all 0.5s ease-in-out;
}
.img-relative-position:hover h2 {
font-size: 60px;
}
.img-relative-position a {
display: block;
}
.img-relative-position img {
transition: all 0.5s ease;
}
.img-relative-position:hover img {
transform: scale(1.2) rotate(-5deg);
}
Thanks
I want to animate the underline under some texts. Here's the solution.
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:hover {
color: #000;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<h2>
<a href=''>Home</a>
</h2>
After fiddling with it, I got stuck.
I changed content attribute in h2 > a:before {} from "" to "x" and height attribute from 2px to 15px, and added some background color around boxes for debugging.
As we know since <a></a> tag is an inline element and it generates a block box that contains the "Home" text. and in the css, we used h2 > a:before {} to add some text before "Home", which will create a anonymous block box which contains the text as we defined in context attr "x". (Since the anonymous block box used absolute position, so it will overlap with "Home" text. ) As I changed the height from 15px to 2px, I know the anonymous block box that contains text "x" is not able to hold "x" since the height of anonymous block box is so short.
I don't how the height of anonymous block box will position the text "x" if it's too short.
Does any part of the w3c recommendation or MDN web docs or any other references that can answer the question ???
h2 > a {
position: relative;
color: #000;
text-decoration: none;
background-color:grey;
}
h2 > a:hover {
color: #000;
}
h2 > a:before {
content: "x";
position: absolute;
width: 100%;
height: 15px;
bottom: 0;
left: 0;
background-color:orange;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
background-color:red;
}
<h2>
<a href=''>Home</a>
</h2>
Yes, overflow. - # Temani Afif
I have been learning about flip cards and I have run into an issue. I have two cards that when they are flipped, there is a picture on the back. By moving the mouse a second time, the picture should enlarge. The issue I am having is when the image on the card to the left is enlarged, it is hidden behind the second card to the right. However, when the image on the card to the right is enlarged, it appears in front the first card. What I would like is for the picture to appear in front regardless as to what card is flipped. I have read that this is an issue with the z-index but I have been unsuccessful in figuring out where and how to set it.
The code for the web page is:
<div class = "center">
<div class="flip3d">
<div class="back"> <img class="exampleGif enlargeRight" src="https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg?auto=compress&cs=tinysrgb&h=350"></div>
<div class="front" style="width:400% height:300%">
<p>Cats</p>
</div>
</div>
<div class="flip3d">
<div class="back"> <img class = "exampleGif enlargeLeft" src="https://images.pexels.com/photos/66898/elephant-cub-tsavo-kenya-66898.jpeg?auto=compress&cs=tinysrgb&h=350"></div>
<div class="front" style="width:400% height:300%">
<p>Elephant</p>
</div>
</div>
The css file is:
.flip3d{
width:400px;
height:300px;
margin: 10px;
float: left;
}
.flip3d > .front{
position: absolute;
transform: perspective(600px) rotateY(0deg);
width:400px;
height:300px;
border-radius: 7px;
background: #267326; /* was #FCO */
backface-visibility: hidden;
transition: transform .5s linear 0s;
font-size:1.5vw;
font-family: Arial, Helvetica, sans-serif;
font-style: oblique;
color: white;
text-align: center;
}
.flip3d > .back{
position: absolute;
transform: perspective(600px) rotateY(180deg);
width:400px;
height:300px;
border-radius: 7px;
background: #80BFFF;
backface-visibility: hidden;
transition: transform .5s linear 0s;
}
.flip3d:hover > .front{
transform: perspective(600px) rotateY(-180deg);
}
.flip3d:hover > .back{
transform: perspective(600px) rotateY(0deg);
}
img.exampleGif {
width:400px;
height:300px;
z-index:0;
position:relative;
}
.center {
margin: auto;
width: 50%;
border: none;
padding: 10px;
}
.enlargeRight:hover {
transform:scale(2,2);
transform-origin:0 0;
transition: all .5s;
}
.enlargeLeft:hover {
transform:scale(2,2);
transform-origin:right top;
transition: all .5s;
}
The code that I am using is located here.
Than you for your help.
Add z-index in the class below with the same value as I did. There is little doc to increase your knowledge.
EDIT: This doesn't need the value to equal 1 or 2. Just z-index in .back must be greater than in .front.
.flip3d > .back{
position: absolute;
transform: perspective(600px) rotateY(180deg);
width:400px;
height:300px;
border-radius: 7px;
background: #80BFFF;
backface-visibility: hidden;
transition: transform .5s linear 0s;
z-index: 1;
}
OK, so I am trying to make a logo that when hovered on a text box is revealed saying "If you see this icon on any of pages, click it to return to the index." - I've done this with no trouble, however, my problem is that when you hover where the text box would be (without it being revealed yet) it reveals itself. This is rather annoying as I am wanting the text box to show only when you hover over the logo, not when the hover where the text box would be. My code:
.logovAlign #hoverText {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
top: -100%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
}
.logovAlign:hover #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
<div class="logovAlign">
<img src="images/favicon.png" width="50" height="50" alt "Lighting Bolt Logo">
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>
.logoAlign:hover contains the #hoverText, suggesting a hover action take place on .logoAlign whenever #hoverText is hovered.
Instead you can achieve the same with detecting hover on the img. Then using the Adjacent Sibling Selector + to select #hoverText.
.logovAlign #hoverText {
background-color: rgba(255,255,255,0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
/*top: -100%;*/
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
}
.logovAlign img:hover + #hoverText {
opacity: 1;
transition: opacity 0.3s ease-in;
}
<div class="logovAlign">
<img src="http://via.placeholder.com/350x150" width="50" height="50" alt"Lighting Bolt Logo">
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>
I made a couple of changes in your code, in order to illustrate my solution:
I've changed the picture to a div, so it would be shown no matter what.
I've removed the top: -100%; property, which caused an error in the text's preview.
The actual solution was using the adjacent sibling call in CSS: +, which allows to put an hover listener on one element, while changing its sibling element's CSS properties.
In this case, the listener was added to the "red button", while changing the opacity of the text inside the p tag.
.logovAlign #hoverText {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
}
#button {
width: 50px;
height: 50px;
background-color: red;
}
#button:hover + #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
<div class="logovAlign">
<div id="button"></div>
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>
The issue is that opacity keep the pointer-events, so elements with opacity:0 can still be hovered and clicked on.
You need to either set pointer-events:none on your .logovAlign #hoverText, or add a switch from visiblity:hidden to visibility:visible, as elements with visibility hidden won't trigger pointer-events.
example with the issue (since the provided code doesn't really work)
.logovAlign{
display:inline-block;
}
.logovAlign #hoverText {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
}
.logovAlign #logo {
width: 30px; height: 30px;
background-color: lime;
display:inline-block;
}
.logovAlign:hover #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
<div class="logovAlign">
<div id="logo"></div>
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>
Fixed example
.logovAlign{
display:inline-block;
}
.logovAlign #hoverText {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 1s ease-out;
pointer-events:none;
}
.logovAlign #logo {
width: 50px; height: 50px;
display:inline-block;
background-color: lime;
}
.logovAlign:hover #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
<div class="logovAlign">
<div id="logo"></div>
<p id="hoverText">If you see this logo on any of my pages, click it to return to this page!</p>
</div>
Now that we got rid of how this happens... a much better solution would be to use the logo as the hover element instead of the containing div, and use a sibling selector to actuate on the hover text.
Something like
#logo:hover + #hoverText {
transition: opacity 0.3s ease-in;
opacity: 1;
}
This will help. I had used JavaScript instead of css.
var span = document.getElementById("text");
function a() {
span.style.visibility = "visible";
}
function b() {
span.style.visibility = "hidden";
}
<!DOCTYPE html>
<html>
<body>
<img src="https://i.stack.imgur.com/8ALM5.png" id="img1" class="img1" onmouseover="a();" onmouseout="b();"/>
<span class="text" id="text" style="visibility:hidden;">If you see this icon on any of pages, click it to return to the index.</span>
</body>
</html>
I have a navigation menu that contains a burger icon made with 3 <span> that is inside another elements :
.navbar {
width: 100%;
color: #fff;
background-color: #df0024;
padding: 1% 0;
}
.tog {
display: flex;
cursor: pointer;
float: right;
width: 6%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
align-items: center;
justify-content: center;
height: auto;
}
/*This is the div that contain the burger 3 layers*/
#nav-icon {
height: -webkit-fill-available;
height: -moz-fill-available;
height: -o-fill-available;
height: fill-available;
position: relative;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
/*/The style of each of the burger icon 3 layers*/
#nav-icon span {
display: block;
position: absolute;
height: 3.1vh;
width: 100%;
background: white;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon span:nth-child(1) {
top: 0px;
}
#nav-icon span:nth-child(2) {
top: 12px;
}
#nav-icon span:nth-child(3) {
top: 24px;
}
<nav class="navbar">
<div class="logo">
<img src="" alt='Logo' />
</div>
<div id='tog' class="tog">
<label for="toggle" id='nav-icon'>
<div class='icon-container'>
<span></span>
<span></span>
<span></span>
</div>
</label>
</div>
</nav>
How to center the #nav-icon span inside the #nav-icon vertically ? All I want is centering the burger icon so I don't care of changing the other elements style that contain the burger icon.
I had to tweak a lot to make this work, but I used a nice vertical-centering trick I know involving top: 50%; plus transition: translateY(-50%);. If you apply those to a child div then it will be vertically centered within a sized parent (the parent should also have position relative or absolute).
I applied these styles to the .icon-container in your code.
.navbar{
width: 100%;
position: relative;
color: #fff;
background-color: #df0024;
padding: 1% 0;
}
.tog {
display: flex;
cursor: pointer;
float: right;
width: 6%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
align-items: center;
justify-content: center;
height: auto;
}
/*This is the div that contain the burger 3 layers*/
#nav-icon{
position: absolute;
top:0;
bottom:0;
left:0;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}
.icon-container {
padding: 0 5px;
box-sizing: border-box;
position: relative;
top: 50%;
-ms-transform: translateY(-50%); /* IE 9 */
-webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
transform: translateY(-50%);
}
#nav-icon span{
display: block;
width: 100%;
height: 5px;
margin-bottom: 3px;
background: white;
border-radius: 9px;
opacity: 1;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
<nav class="navbar">
<div class="logo">
<img src="" alt='Logo'/>
</div>
<div id='tog' class="tog">
<label for="toggle" id='nav-icon'>
<div class='icon-container'>
<span></span>
<span></span>
<span></span>
</div>
</label>
</div>
</nav>
If you have nothing against flex, you may also drop the absolute positionning.
.navbar {
display: flex;
align-items: center;/* vertical-centering */
color: #fff;
background-color: #df0024;
padding: 1% 0;
/* DEMO PURPOSE ONLY to show vertical centering */
transition:0.25s;
height: 100px;
background-image:linear-gradient(to top, transparent 50%, rgba(255,255,255,0.15) 50%);
}
.navbar:hover {height:200px;}
/* end -- DEMO PURPOSE ONLY to show vertical centering */
nav a {
/* demo purpose , useless about centering */
margin: 0 0.5em;
color: white;
}
.tog {
cursor: pointer;
width: 1.5em;
margin-left: auto;/* goes all the way to the right side */
}
/*This is the div that contain the burger 3 layers*/
#nav-icon {
display: block;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer;
}
/*The style of each of the burger icon 3 layers*/
#nav-icon span {
display: block;
background: white;
margin: 0.25em 0;
border-radius: 9px;
opacity: 1;
height: 0.25em;
transform: rotate(0deg);
transition: .25s ease-in-out;
box-shadow: 1px 1px 1px;
}
<nav class="navbar">
<div class="logo">
<img src="" alt='Logo' />
</div>
another link ?
<div id='tog' class="tog">
<label for="toggle" id='nav-icon'>
<div class='icon-container'>
<span></span>
<span></span>
<span></span>
</div>
</label>
</div>
</nav>