I successfully added css code to our squarespace site to make gallery images have the title of each image appear on hover. The problem is that the title leaves extra white space (about 15px) bellow each image. I want each image to be touching each other on top and bottom the same way they do on the sides.
My code is bellow, here is the link to the page: https://baikart.com/artists2
I've tried using padding code but that pushes the image around and I just want the white space gone.
.summary-content {
position: absolute;
color:#fff;
top: 50%;
left: 50%;
opacity: 0;
transition: all .5s ease;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
}
#Main-content {
.summary-content {
position: absolute;
color:#fff;
top: 50%;
left: 50%;
opacity: 0;
transition: all .5s ease;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
}
}
.summary-item:hover {
img {
-webkit-filter: brightness(50%);
filter: brightness(50%);
transition: all .5s ease;
}
.summary-content{
opacity: 1;
}
}
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: rgba(0,0,0,0.8);
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://cdn.pixabay.com/photo/2017/08/30/07/56/money-2696229_960_720.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
Hope the solution will help
The following CSS, inserted via the CSS Editor, will remove the gap between images:
#collection-5d1bb9f4d43d220001cae017 .summary-thumbnail-container.sqs-gallery-image-container {
margin-bottom: 0;
}
The CSS targets the "Artists 2" collection specifically by using its collection ID, which is an id attribute set on the body element. That way, if you create a different collection that you want to format differently, it will be unaffected by the CSS. If you want to apply the style globally, remove the #collection-.... ID selector at the beginning and simply target via classes. It also means that, if you want to target a different collection (but without applying the styles globally), you'll need to update the collection ID in the selector above.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 months ago.
This post was edited and submitted for review 2 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I'm looking at using [this piece of css][1] but I don't want the text to wrap so soon. I'd like it take up 80% of the width of the image. What do I need to modify to make that happen ?
HTML:
<h3>Hover over the image to see the effect.</h3>
<div class="container">
<img src="https://walter.trakt.tv/images/movies/000/472/401/fanarts/thumb/ae10b31b1f.jpg.webp" alt="Avatar" class="image" style="width:100%">
<div class="textbox">
<div class="text">Each Christmas Eve, the Ghost of Christmas Present selects one dark soul to be reformed by a visit from three spirits. But this season, he picked the wrong Scrooge. Clint Briggs turns the tables on his ghostly host until Present finds himself reexamining his own past, present and future.</div>
</div>
</div>
CSS:
.container {
position: relative;
width: 500px;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.textbox {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .textbox {
opacity: 1;
}
.text {
background-color: #04AA5D;
color: white;
font-size: 15px;
padding: 10px 10px;
}
Just change the width property for the ('.textbox') class. This will cause the text area to take more space on the image and it won't wrap so soon. If you are trying to test it in fiddle, just make sure you hit the 'run' cmd on the top left after you make the change.
.textbox {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
width: 80%;
}
Add width: 80% to the textbox css
.container {
position: relative;
width: 500px;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.textbox {
width: 80%;
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .textbox {
opacity: 1;
}
.text {
background-color: #04AA5D;
color: white;
font-size: 15px;
padding: 10px 10px;
}
<h3>Hover over the image to see the effect.</h3>
<div class="container">
<img src="https://walter.trakt.tv/images/movies/000/472/401/fanarts/thumb/ae10b31b1f.jpg.webp" alt="Avatar" class="image" style="width:100%">
<div class="textbox">
<div class="text">Each Christmas Eve, the Ghost of Christmas Present selects one dark soul to be reformed by a visit from three spirits. But this season, he picked the wrong Scrooge. Clint Briggs turns the tables on his ghostly host until Present finds himself reexamining his own past, present and future.</div>
</div>
</div>
I'm trying to recreate the vertical purple scrolling line that appear on this website but I can't get the animation to work properly. This is where I got stuck so far, I can't understand why the animation is not working.
<div class="tm-scroll">
<span></span>
</div>
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
Thanks for your help
You have to add scrollHelperFerro animation using keyframes like below
https://codepen.io/rohinikumar4073/pen/MWaeRMZ
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(100%);
}
,
}
}
<div class="tm-scroll">
<span></span>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tm-scroll {
position: relative;
width: 2px;
height: 130px;
background-color: #e5e5e5;
overflow: hidden;
margin: auto;
}
.tm-scroll span {
position: absolute;
top: 0;
left: 0;
background-color: #77249e;
width: 100%;
height: 100%;
transform: translateY(-100%);
animation: scrollHelperFerro 2s infinite ease-in-out;
}
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
</style>
</head>
<body>
<div class="tm-scroll"><span></span></div>
</body>
</html>
here you define only animation-name, time, etc. but actual CSS animation code is following
animation: scrollHelperFerro 2s infinite ease-in-out;
add animation css:
#keyframes scrollHelperFerro {
0% {
transform: translateY(-100%);
}
50% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
This question already has answers here:
how to flip the div using css?
(3 answers)
Closed 2 years ago.
i am trying to show backside of card on hover using css. i tried below code but its just roates front div and doesn't display back div. also i want to hide front div on hover. Can anyone fix this problem?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content {
position: relative;
}
.front {
background: darkred;
width: 200px;
height: 200px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.back {
background: darkblue;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.content:hover .front {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="content">
<div class="front">Hello</div>
<div class="back">Bye</div>
</div>
</body>
</html>
i try to solve you question and this is my answer....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content {
position: relative;
}
.front {
background: darkred;
width: 200px;
height: 200px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.back {
background: darkblue;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.content:hover .front {
transform: rotateY(180deg);
opacity: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="front">Hello</div>
<div class="back">Bye</div>
</div>
</body>
</html>
Just change
.content:hover .front {
transform: rotateY(180deg);
}
to
.content:hover .front {
display: none
}
Check out this
https://jsfiddle.net/1dsv7e6b/1/
Please add opacity:0;
.content:hover .front {
transform: rotateY(180deg);
opacity:0;
}
You could use CSS animations here to give the effect of the card flipping but then also being hidden.
The #keyframes defines the animation. Here it starts at 0% with no rotation and opacity of 1 (i.e. visible).
Then at 100% the animation is complete at the rotation is 180 degrees and opacity set to 0 so that it is hidden.
#keyframes flip-card {
0% {
transform: rotateY(0deg);
opacity: 1;
}
100% {
transform: rotateY(180deg);
opacity: 0;
}
}
You can then apply this on hover like so:
.content:hover .front {
animation: flip-card 1s;
animation-fill-mode: forwards;
}
You use the animation property to call the animation and also add how long it should take.
An example can be seen here:
https://jsfiddle.net/368jr1ts/
.content {
position: relative;
}
.front {
background: darkred;
width: 200px;
height: 200px;
transition: 0.5s;
position: absolute;
z-index: 1;
}
.back {
background: darkblue;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
.content:hover .front {
transform: rotateY(180deg);
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="content">
<div class="front">Hello</div>
<div class="back">Bye</div>
</div>
</body>
</html>
I wanted to create a div which has a background image and a transparent background color over it with some text. When hover, the transparent background color should slide out towards the bottom of the div as shown in the image:
https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
Left block is default. Right block is hover state.
I modified this snippet: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I modified the provided style to:
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container .overlay {
opacity: 0.75;
}
.container:hover .overlay {
opacity: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
Edited:
My Problem
I tried to achieve a simple slideout animation on my as shown in the image I provided. See this: https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png
I have tried something like this - https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I edited the css they provided to the css I provided above.
Please see the image I provided. I wanted to achieve that.
Try this.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
transition: .5s ease;
height: 0;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
<div class="container">
<img src="https://i.ibb.co/pJFPvFB/Screenshot-2019-03-26-Zeplin-Project.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
Hope this code may help you.
Hi hope this is what you are looking for
Try this fiddle
.container:hover .overlay {
animation-name: slideDown;
-webkit-animation-name: slideDown;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
opacity: 1 !important;
}
hope this is what you are looking
.box {
width: 200px; height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, red 50%, black 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;}
http://jsfiddle.net/jxgrtmvy
I'm trying to create a menu that is hidden off screen on the top of the document. There is a little portion showing that will be hoverable which will bring the rest of the menu into view. Trying to animate bottom to auto but it isn't working. Was wondering if someone knows how or better way to create a menu off screen similar to my codepen.
http://codepen.io/anthony-dandrea/pen/EjqYqj
.hud is the class that's giving me the animation problem.
.hud {
position: absolute;
width: 100%;
text-align: center;
transition: all 1s;
bottom: calc(100% - 39px);
}
.hud:hover {
bottom: 80%;
bottom: auto;
}
As already mentioned by Patrick Allen in comments, you cannot animate/transition from or to an "auto" value using CSS. For your case, you could replace it with transform: translate() like in the below snippet and achieve the same effect.
Below is the relevant SCSS code and what it does:
The transform: translateY(-100%) moves the elements content upwards by the exact height of the container element. This would hide the whole container.
A top: 39px is added such that the chevron icon is still shown and only the content is hidden.
On hover the transform is nullified by doing transform: translateY(0%). This puts the element back in its original position.
But because of the top: 39px present in the unhovered state, the position of the container would be offset a bit and that can be nullified by adding top: 0px on hover.
.hud {
position: absolute;
width: 100%;
text-align: center;
transition: all 1s;
top: 39px;
transform: translateY(-100%);
&:hover {
top: 0px;
transform: translateY(0%);
}
}
body {
background: #121111;
}
.hud {
position: absolute;
color: red;
width: 100%;
text-align: center;
-webkit-transition: all 1s;
transition: all 1s;
top: 39px;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
.hud:hover {
top: 0px;
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
.pull-down {
color: #e6e6e6;
-webkit-transition: all 0.2s;
transition: all 0.2s;
cursor: pointer;
height: 24px;
margin-top: 15px;
font-size: 1.5em;
}
.pull-down:hover {
color: #fff;
}
.hud:hover .pull-down {
color: #fff;
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="hud">
<div class="hud-internal">
<p>foobar</p>
</div>
<i class="fa fa-chevron-down pull-down" data-hud-toggle></i>
</div>
$('#click').click(function () {
var windowHeight = $(window).height();
var lineHeight = $('#line').height();
var desiredBottom = 100;
var newPosition = windowHeight - (lineHeight + desiredBottom);
$('#line').animate({top:newPosition},1000,function () {
$('#line').css({
bottom: desiredBottom,
bottom: 'auto'
});
});
});
Here jsfiddle
Give top: 0; to .hud element and it will work fine. Here is the codepen: http://codepen.io/anon/pen/KpOKdE