I've been searching but haven't found an answer for the specific problem I'm having.
I wanted to use sliding captions for the images on my art blog. The challenge was that I needed the container to adapt to variable image heights so I didn't have to go in and set it manually every time I post something new. What I have so far is really close to working but...
The div is 5 pixels bigger than the image, regardless of the image's height. I made the div background red so it's easy to see the overlap, but I just can't figure out where those 5 pixels are coming from.
I'm really new at this and changed all the css values I could think of and searched for other examples but I still couldn't get the overlap to go away. Any help would be awesome. I'm so close (I think) but I don't know what else to try. Here's most of the css with a jsfiddle link below:
/* variable container adapts to image size (plus 5 unwanted pixels) */
/* I made the background red so you can see where it's too big */
div#imgContainer {
min-width: 20px;
min-height: 20px;
display:inline-block;
background:red;
}
.postContainer {
position:relative;
overflow:hidden;
background: red;
}
.postContainer .postTextbox {
width:100%;
height:50px;
position:absolute;
bottom:0;
left:0;
margin-bottom:-15%;
margin-left:auto;
margin-right:auto;
opacity: 0;
border:0px;
background: black;
}
.postContainer:hover .postTextbox {
margin-bottom:0;
opacity: 1;
}
.postTextbox {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
http://jsfiddle.net/nun243j1/
Thanks again in advance!
It may be because of white-space between elements. Apply image {display: block;} for images to remove this problem.
Related
Demonstration Link: https://codepen.io/jodriscoll/pen/wRpQOw
I'm working on a "sidewards blind-like" animation behavior, where when a user hovers over an object (anchor), it expands the object (anchor) in width and creates a perception of showing more of the objects contain within (think of a clipping mask of sorts).
Initially the video/image object is styled in a way to prevent it from moving 1:1 with the "clipping mask" (anchor wrapping the video/image). Meaning, it is already offset to the position it should be when the user hovers over the anchor.
Both the image and the video are initially styled to fill the entirety of the anchor AND the gutter gaps; this helps when animating to create the perception that we're just showing more of the photo, no actually resizing it and causing it to move on screen (sorry, that might be confusing...):
left: -24px; // the width of each gutter gap
width: calc(100% + 48px); // fill the parent + fill the gutter gaps
When the user hovers over the anchor, the child elements change their CSS specs to:
left: 0; // stay flush with the anchor object
width: 100%; // fill the parent, which now includes the gutter gap(s)
Everything appears to work correctly when viewing the animation behaviors on Chrome / Safari / Firefox:
http://svg-gmmb-cis.pantheonsite.io/wp-content/uploads/2019/01/debugging_animations.mp4
Unfortunately, there is a slight hiccup on IE11/Edge:
http://svg-gmmb-cis.pantheonsite.io/wp-content/uploads/2019/01/IE_animation_bug.mp4
Questions and hopeful helpful insight towards reaching an answer:
After viewing the animation glitch, does IE11/Edge have issues with animating CSS measures using calc()?
Do I need to create a CSS animation with keyframes to remedy this hiccup in IE11/Edge?
Am I approaching this wrong and should be animating different properties?
You can do this easily with margin and avoid the use of calc.
Here is a simplified example:
.container {
border:1px solid;
padding: 0 24px;
height:100px;
}
.box {
height:100%;
background:red;
transition:.5s all;
}
.box:hover {
margin:0 -24px;
}
<div class="container">
<div class="box"></div>
</div>
Or like this:
.container {
border:1px solid;
margin: 0 24px;
height:100px;
}
.box {
height:100%;
background:red;
transition:.5s all;
}
.box:hover {
margin:0 -24px;
}
<div class="container">
<div class="box"></div>
</div>
I am trying to change the z-index of the image posts that when you hover over them, it comes in front and cover the big white text.
Not sure what I'm doing wrong here...
http://hkumbrella.tumblr.com/
Image post css:
#post img {
width:100%;
z-index: -100;
}
#post img:hover {
opacity:1;
z-index: 100000 !important;
White text css(2014):
.subtitle2{
top:45%;
left:2%;
font-family:arimo;
font-weight:bold;
color: white;
text-transform:uppercase;
font-size:75px;
letter-spacing:-3px;
text-align:center;
position: fixed;
z-index:100;
color: #FFFFFF !important;
{block:Permalink}display:none;{/block:Permalink}
}
Set #wrapper's z-index higher then 100.
All the images are inside #wrapper div, and its z-index is less then its sibling .subtiles, so even if you set higher z-index for children of #wrapper, it won't come in front.
and you are using #post multiple at places in your page. you are not suppose to use id multiple places, instead use classes, they are meant for that only.
I try to rotate the text by using, text-transform with transition. In firefox browser a slight jerk get happened. Check the below link, by mouse overing the text, end of the rotation you can see the slight jerk, how to avoid this?
.rot_pos{
margin:100px auto;
text-align:center;
}
.rotate{
font-size:30pt;
font-weight:bold;
display:inline-block;
transform:rotate(0deg);
-moz-transition:1s;
transition:1s;
}
.rotate:hover{
transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
<div class="rot_pos">
<div class="rotate">Sample Text</div>
</div>
http://jsfiddle.net/es86wh1p/
Any other solution??
This happens only in firefox.
I had a small play with your code in js-fiddle, it almost appears to be a bug in firefox. A quick debugging tip for things like this is to enable borders and set different colors.
I was able to find a solution, but it is so incredibly hackey that this reminds me of the 90's and the fact that mozilla firefox rose from the ashes of the netscape codebase.
First I set a parent/child tag which "Should" have caused the text to rotate when the mouse entered the rot_pos div. This still caused the text to 'trap' when the mouse hit the box that was rotating ( when causing the mouse to leave quickly, you can test this by removing the padding from rot_pos )
Setting the Z-Order of rotate to -2 shows that the rotate:hover trigger is not being triggered when it is 'behind' another div. So the quick lazy fix would be to expand the size of rot_pos so it completely covers the rotating text.
Which leads me to:
http://jsfiddle.net/rwa1pq2v/
.rot_pos{
margin:100px auto;
text-align:center;
border: 1px solid black;
padding: 100px 20px 100px 20px;
}
.rot_pos > .rotate {
font-size:31pt;
font-weight:bold;
display:inline-block;
transform:rotate(0deg);
transition:1s;
border: 1px solid black;
background: green;
}
.rot_pos:hover > .rotate {
transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
.rotate {
z-index: -2;
}
.rotate:hover {
background: pink;
}
The issue with this is that the rotation is being triggered when the mouse enters the outer-area. So with the knowledge that a div which is "above" according to the z-order will prevent the trigger of the div below I dropped a further 2 div's over the top which can be seen as red and blue with a opacity of 0.5 in the example below:
http://jsfiddle.net/non45qy2/
With some lazy hand fiddling of sizes to ensure that they completely cover the trigger area we have my final solution..
To improve on this we could also drop a further 2 div's to cover up the 2 leftover white area's (and fix up the padding on the covered up areas) so you don't have to offset by such a large amount.
if it wasn't 1:40am I would be raising this issue as a bug with mozilla and hoping it gets fixed in the next release.
Trying to solve that for many hours now without success.
I need to create css that works as following
requirement:http://s22.postimg.org/3xp5ut1gx/needed.jpg
and I must use the attached image.
overlay:http://i.stack.imgur.com/VNK86.png
I didn't find a way to do it without cutting the it, but I have to do it without cutting.
I know its somewhere in background-position area, but didn't manage to do so.
Will be very thankful for your help.
the code is very simple:
<div id="large-box">
<div id="image"><img src="images/101512asiatodaysoftbank1_167x94.jpg" alt="stock-img" id="large-img" />
<div id="play-btn"></div>
</div>
<p class="large-desc">Billionaries Love These 5 Stocks</p>
</div>
so the css:
#large-box {
overflow: hidden;
height: 260px;
width: 293px;
position:relative;}
#image {
height: 230px;
position:relative;
}
#image img{
max-width:293px;
max-height:230px;
}
#play-btn {
background-image:url(../images/play.png);
background-repeat:no-repeat;
position:absolute;
bottom:75px;
left:10px;
width:101px;
height:43px;
z-index:10;
cursor: pointer;
/* display:none; */
}
If I understand you right, this is what you're looking for: http://codepen.io/BenMann/pen/hoyqD
However your image (with the play-buttons) is not completely transparent as it seems. It also does not have to be that large.. if you cropped it to contain only the two play buttons and no white-space you could reduce image-size!
Anyway, try tinkering with the background-position: 0 -290px; to make it fit perfectly.
EDIT
In case you need the hover to occur on the whole image, I just added some jQuery. Could also make it easier by just toggling a Class that sets the background-position.. but you get the idea.
I was testing rotation on div. I noticed that when i rotate div with CSS, it produces aliasing which looks awkward. Here is the Fiddle:
Fiddle
CSS:
.alaised {
width:200px;
height:200px;
border:2px solid green;
transform:rotate(-8deg);
-webkit-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
margin:50px;
}
In the fiddle, when div is rotated it is aliased and on hover when not rotated, anti-aliased.
How can I remove this behaviour? I tried searching on web and tried by adding shadows of small width with same color but shadow of it is also aliased.
Note: This Behaviour is not detected on higher resolution screens. But on 1024x768 and less which are the most common resolutions these days suffer from this.
just found an approach: http://jsfiddle.net/zGAvZ/1/ (tried on fx 18)
relevant CSS
.aliased {
width:200px;
height:200px;
margin:50px;
}
.aliased:after {
content: "";
display: block;
width: 100%;
height: 100%;
border:2px solid green;
transform:rotate(-8deg);
-webkit-transform:rotate(-8deg);
-moz-transform:rotate(-8deg);
}
.aliased:hover {
transform:rotate(8deg);
-webkit-transform:rotate(8deg);
-moz-transform:rotate(8deg);
}
The idea is to rotate the :after pseudoelement on normal state and make an opposite rotation on the element itself on hover. On Firefox 18 the square looks nice even after the hover state