Make image caption cover the entire image on hover - html

Currently I am using css in squarespace to try and make image captions cover the entire image on hover, but because of some of squarespace's code I can make it cover the bottom portion of the image.
Here is the website page I am editing:
https://baikart.com/3rdall
And here is the code I have so far to change the caption:
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .image-caption-wrapper {
position: absolute;
color:#fff;
top: 0%;
bottom: 10%;
left: 0%;
right: 0%;
opacity: 0;
transition: all .5s ease;
transform: translate(-0%,-0%);
-webkit-transform: translate(-0%,-0%);
-ms-transform: translate(-0%,-0%);
-moz-transform: translate(-0%,-0%);
}
Thank you in advance!

When you look using element inspector in chrome dev tools or something you can see that there is a max-height: 75% being applied to the caption class. You would need to change this to 100% in your css.
This is what is in element inspector
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption-wrapper {
max-height: 75%;
opacity: 1;
visibility: visible;
}

Remove max-height from here
.sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover:hover .image-caption-wrapper {
max-height: 75%;
}
and set height: 100%.

Related

Overflow hidden for a heading tag not working on mobile browsers, Chrome and Safari. Only works on desktop browsers

screenshots of desktop working vs. mobile not working
I have a code snippet to show what I'm trying to do. I have intentionally set a wider width to a heading that is inside a div containing a slideshow. I want the width of the heading to be clipped by the rounded edge of the image. I have something similar working on desktop browsers, but it doesn't render in Safari or Chrome on my iphone. I had set overflow: hidden to the parent div, which did hide the outer parts of the heading like I intended. But I can't get it to render properly on mobile devices. (Note: overflow hidden is hiding everything in the snippet, and I'm not sure what's going on there either).
I have researched similar questions, but those seem to be dealing with overflow issues concerning the body of an entire page.
div {
position: relative;
/* overflow: hidden; */
}
h3 {
margin: 0;
z-index: 4;
width: 300px;
height: 20px;
position: absolute;
/* top: 150px; */
bottom: 0;
left: 0;
right: 0;
background-color: yellow;
text-align: center;
}
img {
position: absolute;
top: 0;
left: 0;
z-index: 3;
animation: slideshow 12s linear 0s infinite;
border-radius: 25px;
}
img:nth-child(2) {
z-index: 2;
animation-delay: 4s;
}
img:nth-child(3) {
z-index: 1;
animation-delay: 8s;
}
#keyframes slideshow {
25% {
opacity: 1;
}
33.33% {
opacity: 0;
}
91.66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div>
<h3>Slideshow</h3>
<img src="http://dummyimage.com/280x200/56AD30/fff.png&text=1" />
<img src="http://dummyimage.com/280x200/1560f0/fff.png&text=2" />
<img src="http://dummyimage.com/280x200/C03229/fff.png&text=3" />
</div>
I see it now that you added the images. You have a margin problem there. The h3 element adds margin. If you add 'margin: 0' to your h3 style you will see what happens. One more thing, you need to remove 'top: 150px;'.
And you have to put some working code next time. In the example you added you cannot see anything at least you add a height value to the main div.

CSS animation affecting page width

I have an image spinning on my page using CSS animation transforms. The problem is when I reduce the page width I get a horizontal scroll bar that's constantly changing sizes. How can I keep the spinning image but have the parent container cut off the sides when it starts expanding outside of the page width?
I've tried changing the image to a background-image in the rays div but then I lose the effect completely.
See the below minified example.
#rays-container {
width: 100%;
max-width: 490px;
position: absolute;
left: 0;
right: 0;
margin: auto;
z-index: 0;
}
#rays {
width: 100%;
height: 100%;
}
#-webkit-keyframes rays {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
#-ms-keyframes rays {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
.spin {
-webkit-transform-origin: center center;
-webkit-animation: rays 60s infinite linear;
-ms-animation: rays 60s infinite linear;
-ms-transform-origin: center center;
}
<div id="rays-container" class="spin">
<div id="rays">
<img src="https://s-media-cache-ak0.pinimg.com/736x/af/97/ee/af97eef70a8bce541b19c6a41178a015.jpg" style="width: 100%; height: 100%;">
</div>
</div>
CodePen
The scroll bars you're seeing are because the content inside it is larger than its width (that's the obvious part). That being said, one way of fixing it would be to add overflow-x: hidden; to the CSS of the parent of your element with class="spin", which in this case is the <body>.
body {
overflow-x: hidden;
}
Overflow is the CSS property that defines what will happen if the content doesn't fit. The value hidden tells it to simply clip the content, and not display any scroll bars.
For more info, here's the MDN page on CSS overflow.
Try adding padding to the #rays class, like so.
#rays {
padding: 100px;
/* as suggested by Matheus Avellar */
overflow: hidden;
/* width: 100%; */
/* height: 100%; */
}
Code Pen

Fixed positioning with parent element having transformations

After spending much time coding a website, my whole plan seems to have just shattered. I came across that I was unable to position any elements with 'fixed' - they just wouldn't work. After some research, I figured it was to do with the fact that the element's parent contains several transformations and this means that you are unable to have a fixed element as it is not now fixed to the viewport, but to the parent's transformations.
I NEED to be able to use fixed positioning, but my whole HTML code is inside this div with the transformations - and I can't change that as it's a fundamental part of the design.
Im not to sure if there is any fix for this, or some way to get around the problem possibly with jQuery or something. Please help me out! If it's required I can provide some code.
Thank you!
http://wtfhtmlcss.com/#position-transforms
Here is some CSS:
.container {
background: #fff;
min-height: 100%;
position: relative;
outline: 1px solid rgba(0,0,0,0);
z-index: 10;
-webkit-transform: translateZ(0) translateX(0) rotateY(0deg); reset transforms (Chrome bug)
transform: translateZ(0) translateX(0) rotateY(0deg);
}
.container::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0px;
opacity: 0;
background: rgba(0,0,0,0.2);
/* the transition delay of the height needs to be synced with the container transition time */
-webkit-transition: opacity 0.4s, height 0s 0.4s;
transition: opacity 0.4s, height 0s 0.4s;
}
.animate .container::after {
opacity: 1;
height: 101%;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
/* Effect Move Left */
.effect-moveleft {
background-color: rgb(50,50,130);
}
.effect-moveleft .container {
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.effect-moveleft .container::after {
background: rgba(255,255,255,0.6);
}
.effect-moveleft.animate .container {
-webkit-transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
}
.no-csstransforms3d .effect-moveleft.animate .container {
left: -75%;
}
The container obviously contains the whole body code.
Then there is the DIV which I have set to fixed positioning and which won't fix.
The CSS Transforms Module Level 1 says
For elements whose layout is governed by the CSS box model, any value
other than none for the transform results in the creation of
both a stacking context and a containing block. The object acts as a
containing block for fixed positioned descendants.
However, it seems there isn't consensus:
ISSUE 1: Is this effect on position: fixed necessary? If so,
need to go into more detail here about why fixed positioned objects
should do this, i.e., that it’s much harder to implement otherwise.
See Bug 16328.
So you can wait and maybe the spec will be changed.
But a better approach would be moving your fixed element outside the transormed element.

CSS: After rotateY(180deg) z-index not working as intended

Example code here:
http://jsfiddle.net/gat5S/1/
I want to create a "card" that can be flipped via CSS rotateY. The rotation is based on David Walsh's CSS Flip Animation and in principle works well.
However, in my example, I have an :after pseudo-element for each side of the card that I use to create a paper-like shadow effect. This pseudo-element is put behind the card via negative z-index:-1;. This works for the "front" card but not after rotation and not for the "back" card.
The jsFiddle example code shows my problem (currently only containing webkit prefixes). In the initial state everthing looks as intended. The :after pseudo-element saying "INVISIBLE" is only partly visible. When you flip the card via the toggle button two things happen:
The front card :after element becomes visible. This is not intended.
The back card :after element is visible but also in the box where z-index:-1; should make it invisible. Also not intended.
I managed to solve 1. by using JavaScript to add a class to the .front which changes the visibility of :after. However, I cannot manage to solve 2. I tried different z-index values but these don't seem to have any effect at all.
I wonder if there is a clever way to solve both problems. Any help appreciated!
I've got it working
demo
CSS
.front, .back {
text-align: center;
background-color: #FFF9EC;
}
.front:after {
content: ' INVISIBLE ';
position: absolute;
width: 40%;
height: 10px;
left: 70px;
bottom: 12px;
z-index: -1;
-webkit-transform: translateZ(-1px);
-webkit-backface-visibility: hidden;
}
.back:after {
content: ' INVISIBLE ';
position: absolute;
width: 40%;
height: 10px;
left: 70px;
bottom: 12px;
z-index: -1;
-webkit-transform: translateZ(-1px);
-webkit-backface-visibility: hidden;
}
.flip-container {
-webkit-perspective: 1000;
}
/* flip the pane when hovered */
.flip-container.flip .flipper {
-webkit-transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 100px;
height: 100px;
}
/* flip speed goes here */
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
position: relative;
left: 30px;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.back h1 {
-webkit-backface-visibility: hidden;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY(180deg) translateZ(1px);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
Mainly, I have changed the z-index to translateZ; that is the way you should work in 3D.
There was also some issue with the backface visibility : hidden not propagating to the child elements.

Create a CSS only Popup, with fade and effect

I want to create a CSS based popup (CSS3 Allowed) without any JavaScript, with a fade transition and scale effect. Something similar to IceCream Sandwitch and JellyBean popup messages.
I have tried the following:
http://jsfiddle.net/OMS_/7UaK4/5/
Main Parts of Code:
HTML
<span class="info"> Info </span>
<div class="message">
<p>
Content
</p>
</div>​
CSS
.message {
position: absolute;
top: 100px;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
-webkit-transform: scale(.9, .9);
-webkit-transition: all .18s ease-in-out;
}
.info:hover + .message {
opacity: 1;
-webkit-transform: scale(1, 1);
}
What I am doing is setting the opacity of the element to 0, and on hover of a sibling DOM element, transtion it to 1.
How do I position it in center, both vertically and horizontally?
Also, is this the proper way to make a CSS3 popup?
Can I transition from display: none to display: block ?
Thanks
How do I position it in center, both vertically and horizontally?
Essentially, you would push the popup 50% from the top and left. However, you must go backwards a bit, since you must take into account the width and height of the popup.
.center-of-screen {
position: absolute;
top: 50%; margin-top: /* -(height/2) */;
left: 50%; margin-left: /* -(width/2) */;
}
Source: How to center an object exactly in the center?
Note: -(height/2) and -(width/2) are negative values of half of element's width and height. E.g. if your element is 300px x 200px code is:
.center-of-screen {
position: absolute;
top: 50%; margin-top: -100px;
left: 50%; margin-left: -150px;
}
Also, is this the proper way to make a CSS3 popup?
Yes, if you are talking about a hover popup.
Can I transition from display: none to display: block ?
No. You would go from display: none to display: block with transition only on opacity.
This is possible now by using visibility:
.message {
visibility: hidden;
opacity: 0;
transform: scale(.9);
transition: transform .18s, opacity .18s, visibility 0s .18s; // delay visibility
}
.info:hover + .message {
visibility: visible;
opacity: 1;
transform: scale(1);
transition-delay: 0s;
}