I'm having trouble finding a solution to this problem.
I have set up this small example here.
Google Chrome seems to break the border radius on :hover while Firefox renders it properly. What would be the correct approach to fix this?
position:relative in .bubble is probably the thing breaking it, if that's so is there any other solution to have the .info absolute position div nested to the .bubble so top: would use the top of the .bubble and not the page?
HTML:
<div class="bubble">
<img src="http://oneslidephotography.com/wp-content/uploads/2009/05/Digital-SLR-Photography-All-in-One-For-Dummies-sample-image.jpg" />
<div class="info">
<h3>Some Info Text</h3>
</div>
</div>
CSS:
.bubble {
position: relative;
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
}
.info {
overflow: hidden;
position: absolute;
width: inherit;
-webkit-transition: top 0.2s ease-out;
-moz-transition: top 0.2s ease-out;
-o-transition: top 0.2s ease-out;
-ms-transition: top 0.2s ease-out;
transition: top 0.2s ease-out;
top:200px;
}
.bubble:hover .info {
top:80px;
}
.info h3{
text-align: center;
font-family: sans-serif;
}
I think the problem is the fact that you have an image taking up your whole background.
I've changed it so that you don't have an image (and reduced the border radius) ... so just basic border-radius, and of-course, things are fine:
<div class="bubble" style='border:solid 1px'>
<div class="info">
<h3>Some Info Text</h3>
</div>
</div>
http://jsfiddle.net/SbR6n/
Sounds like a bug.
Related
I can't share a page on this, due to the page not being public. However, what I'm trying to do is create a hover effect on both a div and a H4 text element. Nothing of which seems to work for me. Here's my code:
HTML:
<div class="grid__item small--one-half medium-up--one-quarter">
<a href="/collections/hoop-earrings" class="collection-item collection-item--overlaid" data-aos="row-of-4"><div class="image-wrap">
<div class="collection-image collection-image--square lazyload" style='background-position: center center; background-image: url("https://cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_720x.jpg?v=1561755337");'>
</div>
</div>
<noscript>
<div
class="collection-image collection-image--square"
style="background-image: url(//cdn.shopify.com/s/files/1/1810/9951/collections/LDE42DSOS_Hexagon_Hoop_Earring_web_scroll_1200x_ad647924-a6b9-4c9a-b36a-7d6a3b0d0a6c_400x.jpg?v=1561755337); background-position: center center;">
</div>
</noscript>
<div class="collection-image--overlay-background"></div>
<span
class="collection-item__title collection-item__title--overlaid collection-item__title--heading collection-item__title--center">
<span>
Text Goes Here
</span>
</span>
</a>
</div>
CSS:
.collection-image--overlay-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
opacity: 0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center {
opacity: 0!important;
-moz-transition: opacity .25s linear;
-webkit-transition: opacity .25s linear;
-o-transition: opacity .25s linear;
transition: opacity .25s linear;
}
#media only screen and (min-width: 768px) {
.collection-image--overlay-background:hover {
z-index: 1;
opacity: .8;
}
.collection-item__title.collection-item__title--overlaid.collection-item__title--heading.collection-item__title--center:hover {
z-index: 1;
opacity: 1;
}
}
I tried making a small snippet. See if it´s what you´re looking for.
Since you´re using the !important flag in one of your opacity rules, all the other changes after the fact will not take effect unless you also use !important. However I would not advice using !important that freely because whenever they are present such errors are a bit harder to track.
.container {
background-color: blue;
height: 100px;
}
.onHover {
background-color: red;
width: 80%;
height: 100px;
margin: 0 auto;
opacity: 0.5;
/*opacity: 0.5 !important; In your code you have
a line like this.*/
}
.onHover:hover {
opacity: 1;
}
<div class="container">
<div class="onHover">
<h4>My title Here</h4>
</div>
</div>
I am trying to edit a wordpress template. My goal is to make movie posters look bigger than now.
This is how it looks at the moment - http://prntscr.com/i30lgt
This is how it looks when i edint height in the css - http://prntscr.com/i30ltf
The changes i made are in this css code:
.loop-container article img.attachment-post-thumbnail {
width: 100%;
height: 450px;
-webkit-transition: opacity 0.175s ease-in-out;
-moz-transition: opacity 0.175s ease-in-out;
-o-transition: opacity 0.175s ease-in-out;
transition: opacity 0.175s ease-in-out; }
How can i make them resize properly and not stretch?
May be this will help you
<div class="article">
<img alt="img" src="thumb-image.jpg" class="attachment-post-thumbnail">
</div>
<style>
.article{
display:block;
overflow:hidden;
width:100%;
height:450px;
}
.article img.attachment-post-thumbnail {
width:100%;
height: auto;
display:block;
}
</style>
Use object-fit:cover; if you want your image to cover the div or whatever.
Or, make height:auto.
object-fit:cover; will crop your image from two sides.
I'm trying to make a child div (.imagehead) slide to the left (about 25%) on hover of the parent div (#bite) and reveal another div (Name not decided, but I want it to be 2-3 lines of text) to the right of (.imagehead), relative to where (.imagehead) is.
I haven't coded in a while, sorry if this is extremely simple and I just can't solve this.
Here is the code itself (a tumblr theme I'm messing with)
<div id="headbox">
<div class="top">
<div class="nav">
<div align="center">
<BR/>
<BR/>
<div class="headimage"><img src="http://s24.postimg.org/gqgjloln9/head.png"></div>
<div id="transitiontext">I want to show this when "headbox" is hovered on, moving "headimage" to the left 25% and revealing this text next to it</div>
<BR/>
<BR/>
</div>
</div>
</div>
#headbox {
top: 30px;
}
#headbox:hover .headimage {
left: 25%;
}
http://jsfiddle.net/bko87pk9/
The image is made position: absolute to remove it from the normal flow. The text will now display underneath.
The nav container is made position: relative so that its absolute children will position themselves in relation to it and not the body
The image is moved on hover and the transition creates a smooth animation to display the text
Examples
Example 1
In this example, the text needs to be contained in a box the same height and width of the image so it does not peek out from underneath.
.nav {
height: 100px;
position: relative;
}
.headimage {
position: absolute;
transition: left 0.5s;
left: 0;
}
.nav:hover .headimage {
left: 25%;
}
.transitiontext {
width: 25%;
}
<div class="nav">
<img class="headimage" src="http://s24.postimg.org/gqgjloln9/head.png">
<div class="transitiontext">This text needs to be contained properly.</div>
</div>
Example 2
In this example, the text can spill out underneath as it will be hidden with opacity: 0. On hover the opacity is changed to opacity: 1 with a smooth transition.
The opacity value changes the z-value of the text div, so we need to declare z-index values (higher will display on top of lower)
pointer-events: none prevents the hover from activating when hovering the hidden text.
.nav {
height: 77px;
/* height of image */
position: relative;
}
.headimage {
position: absolute;
transition: left 0.5s;
left: 0;
z-index: 2;
}
.nav:hover .headimage {
left: 25%;
}
.transitiontext {
width: 25%;
transition: opacity 0.5s;
opacity: 0;
z-index: 1;
pointer-events: none;
}
.nav:hover .transitiontext {
opacity: 1;
}
<div class="nav">
<img class="headimage" src="http://s24.postimg.org/gqgjloln9/head.png">
<div class="transitiontext">This text does not need to be contained as it will be hidden until the hover state is activated. This text does not need to be contained as it will be hidden until the hover state is activated.</div>
</div>
I am sorry for any not working code, I crested this on my phone.
<div id="test">
Hover on this div.
</div>
#test {
height: 100px;
width: 200px;
background-color: #F1F1F1;
-webkit-transition:
all 1s ease-in-out
all 1s linear;
-moz-transition:
all 1s ease-in-out
all 1s linear;
-ms-transition:
all 1s ease-in-out
all 1s linear;
-o-transition:
all 1s ease-in-out
all 1s linear;
transition:
all 1s ease-in-out
all 1s linear;
}
#test:after {
height: 100px;
width: 200px;
content: "Second div.";
display: none;
background-color: #F9F9F9;
position: absolute;
top: 0px;
left: 210px;
}
#test:hover:after {
display: block;
}
I have the following CSS:
.foo
{
height:100px;
overflow:hidden;
-webkit-transition: height 200ms;
-moz-transition: height 200ms;
-o-transition: height 200ms;
transition: height 200ms;
}
.foo.open
{
height:auto;
}
When .foo has an auto height, it will be a height of ~550px depending on the content.
I add the class open using jQuery, and I would expect to see the height change from 100px to ~550px in 200ms using CSS3 transitions.
However what exactly happens is that the height changes from 100px to 0px, then jumps to ~550px.
-- See Live Demo --
If I instead change .open to height:550px then this works fine, however the content length will vary and therefore I need to set the height to auto, and not a fixed pixel height.
Why is the div closing instead of sliding to ~550px, and how can I resolve this animation issue?
I don't think you can transition to height: auto; with css transitions. A workaround, which isn't perfect is to transition max-height instead and set it to something greater then it will ever get. Depending on what value you set it to will have a effect on the transition speed, but I've set it to max-height: 1000px; for the sake of simplicity.
Here's a demo to show you what I mean.
Code from demo:
.foo
{
max-height:100px;
overflow:hidden;
-webkit-transition: max-height 200ms;
-moz-transition: max-height 200ms;
-o-transition: max-height 200ms;
transition: max-height 200ms;
}
.foo.open
{
max-height:1000px;
}
It's not an elegant solution, but I hope it helps.
This isn't the most elegant solution, but it gets around the auto height issue.
On click of the button, calculate the height the div will be with auto height by doing:
var openHeight = $foo.addClass("heightauto").height();
Then remove this class straight afterwards, and apply a height to the div of openHeight:
$foo.removeClass("heightauto");
$foo.height(openHeight);
The heightauto class also needs to override the CSS3 transitions so that the height is changed instantly:
.foo.heightauto
{
height:auto;
-webkit-transition:0;
-moz-transition:0;
-o-transition:0;
transition:0;
}
See Live Demo: http://jsfiddle.net/AbPEx/4/
This is still hacky though, so if there is a more elegant solution then I'm open to suggestions
It is not possible to use transitions with height:auto.
The trick with max-height is a pretty good solution but has some inconvenience, especially a weird delay if max-height is much higher than the real height.
Here is the trick I use : http://jsfiddle.net/g56jwux4/2/
Basically it is two imbricated DIVs translating in opposite directions. Take a look a the code at jsfiddle because my english is not good enough to explain it clearly.
HTML part:
<body>
<p>Technicaly this dropdown menu looks like a simple height transition.</p>
<p>But this pure css code also works this a variable number of choices in menu, working around the "height:auto" not taken into account by css transitions.</p>
<input type="checkbox" id="menuOpen"></input>
<label id="bouton" for="menuOpen"><span>Click on me !</span>
<div id="menu">
<div id="masque">
<div class="choix" id="choix1">Choix 1</div>
<div class="choix" id="choix2">Choix 2</div>
<div class="choix" id="choix3">Choix 3 très très long pour voir la taille finale du menu</div>
<div class="choix" id="choix4">Choix 4</div>
<div class="choix" id="choix5">Choix 5</div>
<div class="choix" id="choix6">Choix 6</div>
</div>
</div>
</label>
</body>
CSS Part :
body {
font-family: sans-serif;
}
#menuOpen {
display: none;
}
#bouton {
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 30px;
background-color: lightgray;
cursor: pointer;
}
#bouton > span {
color: black;
padding: 6px;
line-height: 30px;
}
#menu {
position: absolute;
top: 100%;
overflow: hidden;
min-width: 100%;
transition: transform 0.3s linear 0s, visibility 0.3s linear 0s;
transform: translateY(-100%);
visibility: hidden;
color: white;
}
#menuOpen:checked + #bouton > #menu {
transform: translateY(0%);
visibility: visible;
transition: transform 0.3s linear 0s, visibility 0s linear 0s;
}
#menuOpen:checked + #bouton > #menu > #masque {
transform: translateY(0%);
}
#masque {
position: relative;
background-color: gray;
transform: translateY(100%);
transition: transform 0.3s linear 0s;
}
.choix {
white-space: nowrap;
padding: 3px 6px;
}
.choix:hover {
background-color: darkgray;
}
There is a small bug in there, I already fix it. by adding min-height: 100px;
.foo {
min-height: 100px;
height: 100px;
...
}
There you won't see it go back to 0px.
I'm currently making a new theme for my blog and I'm having a problem with the header. See, the header has a fixed position at the top, like a nav bar, and it shrinks when the user scrolls down. However, on some browsers (mainly Chrome, especially for windows), the Twitter icon on the header has a strange flickering behaviour, going down to the next line for 1/10th of a second or so.
I've seen lots of things about flickering bugs in Chrome when using transitions but nothing that looks like this (also, the fixes didn't apply to my situation).
It's a simple transition on the margin of the icons and the height of the header.
Has anyone seen something similar?
Thanks a lot!
EDIT: recreated it in a Fiddle. The problem is still here: http://jsfiddle.net/PVmgz/
HTML `
<header>
<div class="container header">
<div id="logo">Logo</div>
<div class="social">
<div class="search icon">
</div>
<div class="facebook icon">
</div>
<div class="twitter icon">
</div>
</div>
</div>
</header>
<div id="button">Scroll</div>
`
CSS
header {
width: 100%;
height: 98px;
background: #EEE;
position: fixed;
top: 0;
z-index: 9999;
-webkit-transition: height, ease-in, 0.4s;
-moz-transition: height, ease-in, 0.4s;
-ms-transition: height, ease-in, 0.4s;
-o-transition: height, ease-in, 0.4s;
transition: height, ease-in, 0.4s;
}
header.scroll {
height: 60px;
}
header.scroll .header #logo {
width: 350px;
height:50px;
}
header.scroll .header .social {
margin-top: -2px;
}
header.scroll .header .social .icon {
margin-left: 2px;
}
.header {
padding: 5px 10px 0;
}
.header #logo {
width: 400px;
height:82px;
background: #696;
color:white;
float: left;
-webkit-transition: width, ease-in, 0.4s;
-moz-transition: width, ease-in, 0.4s;
-ms-transition: width, ease-in, 0.4s;
-o-transition: width, ease-in, 0.4s;
transition: width, ease-in, 0.4s;
}
.header #logo img {
max-width: 100%;
height: auto;
}
.header .social {
float: right;
margin-top: 19px;
-webkit-transition: margin-top, ease-in, 0.4s;
-moz-transition: margin-top, ease-in, 0.4s;
-ms-transition: margin-top, ease-in, 0.4s;
-o-transition: margin-top, ease-in, 0.4s;
transition: margin-top, ease-in, 0.4s;
}
.header .social .icon {
display: inline-block;
margin-left: 20px;
width: 51px;
height: 51px;
border-radius:999px;
-webkit-transition: margin-left, ease-in, 0.4s;
-moz-transition: margin-left, ease-in, 0.4s;
-ms-transition: margin-left, ease-in, 0.4s;
-o-transition: margin-left, ease-in, 0.4s;
transition: margin-left, ease-in, 0.4s;
}
.header .social .icon.facebook {
position: relative;
background:#336699;
}
.header .social .icon.twitter {
position: relative;
background:#66cccc;
}
So I have a possible explanation for this problem, and some code that definitely fixes it.
The possible explanation is that the shrinking social media icons are being rounded up in size at times. As they're shrinking it might be calculating a width of, say, 26.6 pixels, when of course it must always display as an integer number of pixels. When it rounds that up to 27 pixels, this knocks the last social media icon to the next level.
If this is correct, it flickers because it will continue to shrink, calculating 26 pixels, which is an O.K. value, and it won't drop down. But then it immediately goes to 25.9 pixels, which again drops it down.
If this is indeed correct, it'd actually be a bit more complicated than this simple explanation I'm giving (the width of the parent element comes into play), but this is enough to get the idea across.
Anyway, a fix that works is giving the div that holds the icons a width, so that there's 'breathing room,' if you will, for the icons to expand.
Here's some code that gives it that room, but you'll need to optimize it for it to display as you want it to.
.header .social {
...
width: 500px;
}
My initial idea for a solution would be the set the width of the this div, then float the icons to the right within it.
Kinda late with the answer, but i was just confronting with this issue when transitioning the margin-left value.
The solution is setting the "border-spacing" value to 0