I am building a personal portfolio site to showcase some projects and am trying to implement the following:
A screenshot of a website is shown with the title of the site on a card at the bottom of the image
When the user hovers over the image, the image fades and the card at the bottom of the image smoothly pops up to display a description of the site
Everything is set up, but I cannot get the card to transition smoothly from the bottom of the image, it currently jumps from its starting position to ending position.
A codepen is here: https://codepen.io/umbauk/full/vYYZEjW
The relevant portion of my code is here:
.project-text {
background-color: rgb(58, 58, 58);
padding: 1%;
z-index: 5;
position: absolute;
width: 100%;
top: calc(100% - 3rem);
left: 0;
transition: all 0.5s ease;
}
.project-box:hover .project-text {
top: auto;
bottom: 0;
transition: all 0.5s ease;
}
project-text box is of variable size so I initially set it to show the top 3rem of the text box so that only the title displays. On hover, I set bottom: 0 so that all text is displayed (and set top: auto so that setting bottom can override top.
However, transition: all 0.5s ease; is not being triggered. It is triggered if I set top to something other than auto e.g. top: 50%.
How do I get my project-text box to smoothly transition in and out while just popping up enough to show all text? Thanks in advance!
Basically you cannot transition anything to auto. Transitions etc rely on numbers and auto is not a number.
Rather than using changing top values etc I'd suggest you look into a transform.
html {
font-size: 18px;
height: 100%;
}
body {
color: rgb(177, 177, 177);
height: 100%;
background-color: #121212;
}
h3 {
font-size: 2rem;
color: #ffffff;
text-decoration: none;
opacity: 0.87;
margin: 0;
}
.projects {
height: 100%;
background-color: #121212;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 300px 300px;
grid-template-areas: 'project1 project2' 'project3 project4';
padding-left: 15%;
padding-right: 15%;
padding-top: 5%;
grid-gap: 5%;
}
.project-text {
background-color: rgb(58, 58, 58);
padding: 1%;
z-index: 5;
position: absolute;
width: 100%;
top: 100%;
left: 0;
transform: translateY(-3rem);
transition: all 0.5s ease;
}
.project-box:hover .project-text {
transform: translateY(-100%);
transition: all 0.5s ease;
}
.project-box {
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 1 1 auto;
justify-content: center;
align-items: flex-end;
background-position: center;
background-size: cover;
position: relative;
background: #121212;
overflow: hidden;
}
.project-box:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}
.project-box:hover::before {
opacity: 0.6;
}
.project1 {
grid-area: project1;
}
.project1:before {
background-image: url('https://darrengreenfield.com/cafeandkids.png');
}
<body>
<div class="projects" id="projects">
<div class="project1 project-box">
<div class="project-text">
<a href="https://cafeandkids.com" target="_blank" rel="noopener noreferrer">
<h3>cafeandkids.com</h3>
</a>
<p>
An app to help parents find great playgrounds near great coffee shops. A single page, front-end only app using HTMl, CSS, JavaScript and React. Uses Google Maps API and the OpenWeather API.
</p>
</div>
</div>
</div>
</body>
Related
Does anyone knows how to do in css the following effect on hover on a image (dark overlay + image grow + name which appears on it) : https://drive.google.com/file/d/1zP5gRnI7BZIO-ajHSrZg2LnNhZCJ_f5F/view?usp=sharing
Thank you very much :)
My practice is to create wrapper element around img tag
<div class="img-container">
<img src="./images/img.png" alt="foo" />
</div>
and then applying styles like
.img-container {
position: relative;
border-radius: 10px;
overflow: hidden;
}
.img-container:hover .overlay {
opacity: 1;
}
.img-container:hover img{
transform: scale(1.2);
}
.img-container::before {
content: "Hello";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
line-height: 25px;
color: #fff;
text-align: center;
background-color: rgba(175, 175, 175, 0.425);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}
img {
transition: transform 0.3s;
}
Hope this help ;)
You can either create a parent element appending the image element inside or use the ::after selector:
img {
position: relative;
}
img:hover {
/* grow image here */
}
img:hover::after {
contents: "FLUO";
display: flex;
background-color: rgba(0, 0, 0, 50%);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
justify-content: center;
align-items: center;
}
Or use the background-image property to grow your image:
img {
background-image: url("/path/to/your/image.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
}
img:hover {
background-size: 120%;
}
I'm learning about CSS animations and am trying to animate this stamp which uses relative and absolute positioning. I want the animation to:
Start at it's original size.
Grow 2-3xs that size and be at the center of the screen.
Pause for 2-3 seconds seconds.
Shrink back down to it's original size and spot.
The problem I'm running into is keeping the elements positioned on top of the stamp in the same place as the transitions occur. Looking to keep it pure CSS if possible (*side note I haven't added any web-kit/browser support yet because I'm just trying to make it work first).
Here is the code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
height: 90vh;
justify-content: flex-end;
align-items: flex-start;
background: grey;
}
.park-img {
width: 10rem;
height: 11.2rem;
display: inline-block;
margin-left: 2px;
padding: 10px;
background: white;
position: relative;
top: 2rem;
left: -2rem;
/*-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
/*The stamp cutout will be created using crisp radial gradients*/
background: radial-gradient( transparent 0px, transparent 4px, white 4px, white);
/*reducing the gradient size*/
background-size: 20px 20px;
/*Offset to move the holes to the edge*/
background-position: -10px -10px;
/*Animation*/
animation: stampAnimation 9s ease-in-out;
}
#keyframes stampAnimation {
0% {}
50% {
transform: scale(3, 3) translate(-35%, 35%);
}
75% {
transform: scale(3, 3) translate(-35%, 35%);
}
}
.stampText {
position: relative;
top: -1rem;
left: -1.8rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fafafa;
text-transform: uppercase;
animation: stampAnimation 9s ease-in-out;
}
.park-name {
font-weight: bold;
text-align: center;
font-size: 1rem;
}
.park-title {
width: 90%;
overflow: hidden;
text-align: center;
font-size: .5rem;
}
.park-title:before,
.park-title:after {
background-color: #fafafa;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 10%;
}
.park-title:before {
right: 0.5rem;
margin-left: -50%;
}
.park-title:after {
left: 0.5rem;
margin-right: -50%;
}
<div class="park-stamp">
<img src="https://res.cloudinary.com/saveallthethings/image/upload/v1614633821/daniel-burka-X_IwSPO2GH0-unsplash_zvoyst.jpg" class="park-img" />
<div class="stampText">
<div class="park-name">Zion</div>
<div class="park-title">National Park</div>
</div>
</div>
As well as the codepen:
https://codepen.io/aspirationalhobbit/pen/GRNPqxw?editors=0100
I have edited your code to make changes that are different from my initial answer.
Check https://codepen.io/udabasili/pen/VwmqmQK?editors=1100.
Basically, I created a css for the container of your element and moved the animation there. I also removed the translate from your animation. Check the css in the codepen to see the changes
.park-stamp{
animation: stampAnimation 9s ease-in-out infinite;
}
i use CSSGrid with an hover effect who works great on desktop, but i have a bug on mobile and can't find the problem.
You can see the page here, and look on desktop on mobile view: http://lafabutineuse.flywheelsites.com/realisations
I defined my image title and link to be absolute and 100% height of the div.
The code of my title on image:
h2 a, h2 {
background: rgba(0,0,0,0);
color: rgba(0,0,0,0);
position: absolute;
left: 0;
right: 0;
bottom: 0;
align-items: center;
padding: 10px;
padding-bottom: 10px!important;
text-align: center;
height: 100%;
z-index: 10000;
transition-property: background;
-webkit-transition-property: background;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}
and same code on hover but with differents colors:
h2 a:hover, h2:hover {
background: rgba(224,197,76,0.61);
color: white;
position: absolute;
left: 0;
right: 0;
bottom: 0;
align-items: center!important;
vertical-align: middle;
padding: 10px;
padding-bottom: 10px!important;
text-align: center!important;
justify-content: center;
display: flex;
height: 100%;
z-index: 10000;
}
I tried some codes to fix the problem but can't achieve to keep the same effect on mobile.
Do you have any idea please?
Thank you
You have not explicitly set position for .et_pb_grid_item on screens smaller then 980px - that's why your hover-link takes 100% of .et_pb_portfolio_items.
Set position: relative; for .et_pb_grid_item and that should fix the hover problem.
.et_pb_grid_item {
position: relative;
}
Reference codepen: http://codepen.io/anon/pen/XbzJyR
.container {
position: relative;
width: 100px;
height: 100px;
margin: 100px 0 0 50px;
padding: 0;
background: green;
}
.hover {
position: absolute;
top: 50px;
left: 0;
background-color: red;
color: white;
text-align: center;
width: 100%;
height: 100%;
transition-duration: 0.5s;
}
.container:hover .hover {
animation: up-bump 0.4s ease;
top: 0px;
}
Can anyone please show me how to hide the red portion of the container that extends past the green tile? I want to create a thumbnail effect such that only "Test" and part of the red background surrounding Test appears first in the tile, and upon hovering over the tile, the red background moves upwards and fills the entire tile. In short, the lower 50px of the red tile should not appear as it is.
Adding overflow: hidden; to the container will fix this.
.container {
position: relative;
width: 100px;
height: 100px;
margin: 100px 0 0 50px;
padding: 0;
overflow:hidden;
background: green;
}
.hover {
position: absolute;
top: 50px;
left: 0;
background-color: red;
color: white;
text-align: center;
width: 100%;
height: 100%;
transition-duration: 0.5s;
}
.container:hover .hover {
animation: up-bump 0.4s ease;
top: 0px;
}
<div class="container">
<div class="hover">
<h3>Test</h3>
<p>Hello there!</p>
</div>
</div>
I have a test site here:
http://www.hugoproject.com/test.html
I'm trying to put a second row of the book icons beneath the first, but whatever I try doesn't work. The following code makes a single book icon appear:
<div class="project">
Arrow<span></span>
</div>
When I have two sets of the code, two icons appear, when there are three sets of the code three icons appear. But if I have four or more sets of the code still only three icons appear. I want for the extra sets of code to make icons beneath the first three.
Also at the moment when you resize the browser window this makes the icons resize dynamically. I'd like to keep this feature and make both rows of icons fit on the one page such that there is no scroll bar.
Any ideas?
HTML
<div id="content">
<div id="home-projects-wrapper">
<h1 class="home">Hello! My name is Brandon</h1>
<div id="home-projects">
<div id="projects" class="circle">
<div class="project-group">
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
<div class="project">
Arrow<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
#container {
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
position: absolute;
width: 100%;
height: 100%;
left: 0;
overflow-x: hidden;
}
#container.open {
left: 270px;
position: absolute;
width: 100%;
height: 100%;
transition: left .3s;
-moz-transition: left .3s;
-webkit-transition: left .3s;
overflow-x: hidden;
}
#content {
width: 80%;
max-width: 1170px;
margin: 7% auto;
position: relative;
font-size: 14px;
line-height: 22px;
color: #777777;
}
.page-template-page-templateshome-php #content {
width: auto;
margin: 0 auto;
position: static;
}
.single-post #content { width: 60% }
#home-projects {
text-align: center;
overflow: hidden;
position: relative;
}
#projects { width: 100% }
.project-group {
width: 100%;
height: 100%;
position: absolute;
}
.project {
float: left;
text-align: center;
width: 33.3%;
height: 100%;
}
.project-link {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: #adadad;
position: relative;
overflow: hidden;
display: inline-block;
width: 80%;
}
.circle .project-link,
.circle .project-link .hover {
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
}
.project-link .hexagon-top {
content: '';
display: block;
position: absolute;
left: 0;
border-style: solid;
border-bottom-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hexagon-bottom {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-top-color: transparent;
border-left-color: #dfdfdf;
border-right-color: #dfdfdf;
width: 0;
height: 0;
z-index: 2;
}
.project-link .hover {
position: absolute;
width: 100%;
height: 100%;
font-size: 14px;
text-align: center;
color: #fff;
background: #ec6136;
text-decoration: none;
text-transform: uppercase;
display: block;
opacity: 0;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transitin: all .3s;
}
.project-link .hover-text {
display: block;
margin-top: 45%;
}
.project-link .hover-text:after {
content: '>';
font-family: 'icon';
font-size: 12px;
margin-left: 15px;
}
.project-link:hover > .hover { opacity: .9 }
It looks like in your css (style.css) you have this :
.project-group{
width: 100%;
height: 100%;
position: absolute;
}
Just switch absolute by relative and your second row will appear. Is it enough for you?
.project-group{
width: 100%;
height: 100%;
position: relative;
}
I would recommend removing height: 100% from the .project and .project-group classes in your stylesheet. My guess is that setting a 100% height on an element is interacting poorly with the overflow: hidden statement from #home-projects.
First of all you have to double the height of #projects and set the height of .project to 50%.
What do you mean by:
Also at the moment when you resize the browser window this makes the icons resize dynamically. I'd like to keep this feature and make both rows of icons fit on the one page such that there is no scroll bar.