I have a hover effect creating a label over an image that is also a hyperlink to a separate website, however, the hover effect CSS styling is blocking my HTML hyperlink to the other site.
I have the image aligned with multiple other images in a section of my current project, whenever I alter the div to create the link, it misaligns the from the center.
Is there a quick fix that allows me to keep my image centered within CSS Grid and also allows the entire <div class="big-image">to be the hyperlink instead of just the image behind the label?
Here are the codeblocks for reference :
#projects{
background-color: var(--main-bg-color);
/* Test color: #D7D427 */
display: grid;
grid-template-columns: 1.25fr 2fr 1.25fr;
grid-template-rows: 10% 1fr 1fr 1fr ;
margin: 0;
box-sizing: border-box;
justify-items: center;
align-items: center;
}
#work-title{
grid-column-start: 2;
grid-column-end: 3;
}
.img1{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
max-width: 100%;
max-height: 100%;
}
.img2{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.img3{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 4;
grid-row-end: 5;
max-width: 100%;
}
.img4{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
max-width: 100%;
}
.big-image{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
max-width: 100%;
}
/* Image Borders */
.img1 img, .img2 img, .img3 img,.img4 img, .big-image img{
border: 3px solid var(--blue-border);
border-radius: 25px;
}
/* Image/Project :hover effects for Labels */
.big-image {
position: relative;
}
.big-label{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
color: var(--primary-color);
font-family: Verdana, Geneva, Tahoma, sans-serif ;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
border-radius: 25px ;
transition: opacity 0.25s;
/* pointer-events: none; */
}
.big-label > *{
transform: translateY(20px);
transition: transform 0.25s;
}
.big-label:hover{
opacity: 1;
}
.big-label:hover > *{
transform: translateY(0);
}
.big-label-title{
font-size: 2em;
font-weight: bold;
}
.big-label-description{
font-size: 1.25em;
margin-top: 0.25em;
}
<a href="https://mberti13.github.io/run-buddy/">
<div class="big-image">
<img id= "big-image" src="./assets/images/run-buddy-photo.jpg" width="500px" height="350px" alt="Website built for Run Buddy Inc. Made Using HTML and CSS">
<div class="big-label">
<div class="big-label-title">
<h3>Run Buddy</h3>
</div>
<div class="big-label-description">
<h5>HTML, CSS</h5>
</div>
</div>
</div></a>
This line is one Problem:
<h3>Run Buddy</h3>
You have to put Text inner the anchor link. Like that:
<h3>Run Buddy</h3>
Related
I'm just starting to work with grid for a website layout in html. My problem is that when creating the h1 within the grid, it slides out. Strangely, the h1 is not fixed in the grid.
Maybe someone can show me a short example how to get these elements into the grid cell so that they are adjusted
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 1fr 1fr 100px;
gap: 10px;
padding: 10px;
box-sizing: border-box;
}
.container div {
padding: 10px;
border: 1px solid #000000;
}
.gird-header {
grid-column-start: 1;
grid-column-end: 4;
}
header {
grid-area: header;
}
h1 {
text-align: center;
}
.content-game {
grid-row-start: 2;
grid-row-end: span 2;
grid-column-start: 1;
grid-column-end: 3;
}
.content-player {
grid-column-start: 3;
grid-column-end: 4;
;
grid-row-start: 2;
grid-row-end: span 1;
}
.content.buttons {
grid-column-start: 4;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: span 1;
}
.content-footer {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: span 1;
}
<div class="container">
<header class="grid-header">
<h1>Mensch Aerger dich nicht</h1>
</header>
<div class="content-game">Spiel</div>
<div class="content-player">Spieler</div>
<div class="content-buttons">Buttons</div>
<div class="content-footer">Footer</div>
</div>
It's because you've allocated a grid-area to the header element and you've not defined it (using grid-template-areas see here developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas) so the browser doesn't know where to put it. You've also got a syntax error in that you've defined .grid-header in your html and gird-header in your CSS. Remove the grid-area property and rename your class in your CSS and it'll work.
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* made the first row 100px rather than 50px so the header will fit */
grid-template-rows: 100px 1fr 1fr 100px;
gap: 10px;
padding: 10px;
box-sizing: border-box;
}
.container div {
padding: 10px;
border: 1px solid #000000;
}
.grid-header { /* fixed syntax error */
grid-column-start: 1;
grid-column-end: 4;
}
header {
/* removed this grid-area: header; */
}
h1 {
text-align: center;
}
.content-game {
grid-row-start: 2;
grid-row-end: span 2;
grid-column-start: 1;
grid-column-end: 3;
}
.content-player {
grid-column-start: 3;
grid-column-end: 4;
;
grid-row-start: 2;
grid-row-end: span 1;
}
.content.buttons {
grid-column-start: 4;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: span 1;
}
.content-footer {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: span 1;
}
<div class="container">
<header class="grid-header">
<h1>Mensch Aerger dich nicht</h1>
</header>
<div class="content-game">Spiel</div>
<div class="content-player">Spieler</div>
<div class="content-buttons">Buttons</div>
<div class="content-footer">Footer</div>
</div>
When I add an anchor to an image, the grid breaks.
with anchor tag](https://i.stack.imgur.com/ykr64.jpg)
without acnchor tag](https://i.stack.imgur.com/6HPE4.png)
I quadrouple checked my code, I searched overstack, and google, and nothing addresses this directly. I also noticed someone asked this question 2 years ago, but he didn't get a clear answer. Please help me. Thanks in advance.
<div class="food-box">
<h1 id="food-title">FEATURED MENUS</h1>
<img id="dish1" src="./resources/images/ft-food1.png" />
<h3 id="dish-title1" >BRUNCH</h3>
<a href = './lunch.html'><img id="dish2" src="./resources/images/ft-food1.png" /></a>
<h3 id="dish-title2" >LUNCH</h3>
<img id="dish3" src="./resources/images/ft-food1.png" />
<h3 id="dish-title3" >DINNER</h3>
.food-box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
row-gap: 0em;
color: #262626;
background-color: #fdfdfd;
font-family: 'Roboto', sans-serif;
}
#food-title {
grid-column-start: 2;
position: relative;
justify-self: center;
}
#dish1 {
grid-column-start: 1;
padding-left: 1em;
grid-row-start: 2;
max-width: 20em;
}
#dish-title1 {
position: relative;
left: 7em;
grid-column-start: 1;
padding-left: 1em;
}
#dish2 {
grid-column-start: 2;
grid-row-start: 2;
max-width: 20em;
}
#dish-title2 {
position: relative;
left: 7em;
grid-column-start: 2;
grid-row-start: 3;
}
#dish3 {
grid-column-start: 3;
grid-row-start:2;
max-width: 20em;
}
#dish-title3 {
position: relative;
grid-column-start: 3;
grid-row-start: 3;
left: 7em;
}
You have specific grid styling for your images (e.g. #dish1 { grid-column-start: 1; }).
When you wrap the images in links, the images are no longer grid children. The links are the grid children instead. You're styling the wrong elements.
Almost 2 weeks later, countless tries later, even asking a similar question before, I can't make something so simple. CSS doesn't return any info as we know, therefore I don't even know why.
All the examples that I find work, they work on their own, or with media query, while mine, never acts as I want it to, even if I copy the solution. The grids do shrink, and only that happens, no new row ever appears anywhere.
I simplified my design, my website grew over almost those 2 weeks, and I'm sharing just the minimum here, so someone can maybe tell me why grid never adjusts itself, regardless of everything. I want to achieve a very simple thing.
Top consists of 2 columns [top_left + top_right], and I want them to change into 2 rows at a certain screen width, same applies to bottom part [bot_left + bot_right]. In theory and practice, this is doable with both media query and without. No media queries using auto-fill seems to be a better option, because it just adjusts on its own to the screen size, making everything simpler, I guess.
<div class="container">
<div class="top_left"></div>
<div class="top_right"></div>
<div class="top_mid"> </div>
<div class="main"></div>
<div class="bot_left"></div>
<div class="bot_right"></div>
<div class="bot"></div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100vw;
background-color: #E6E6E3;
overflow-x: hidden;
}
.container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
gap: 0px;
}
.top_left {
height: 100px;
display: grid;
background-color: white;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
border: 1px solid red;
}
.top_mid {
display: grid;
background-color: #36454F;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.top_right {
height: 100px;
display: grid;
background-color: white;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
border: 1px solid blue;
}
.main {
max-width: 80%;
margin: auto;
display: grid;
background-color: white;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 5;
border-left: 1px solid #78BE21;
border-right: 1px solid #78BE21;
}
.bot_left {
height: 150px;
display: grid;
background-color: #BCD9ED;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 5;
grid-row-end: 6;
border-top: 1px solid #191919;
border-bottom: 1px solid #191919;
}
.bot_right {
height: 150px;
display: grid;
background-color: #7F8778;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
border-top: 1px solid #191919;
border-bottom: 1px solid #191919;
}
.bot {
height: 250px;
display: grid;
background-color: deepskyblue;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 6;
grid-row-end: 8;
}
Simple code that took me +9 hours to make, sad reality. I tried a lot of tutorials and pages, but even they are unable to help me. I copied/modified multiple lines of code that I came across, but none does anything. This is just a learning page, where I'm trying to incorporate grid responsiveness for variety of devices.
I attached screens below, with how it is, and how I want it to be.
I believe it is quite simple thing to do, seing how some tutorial code consists of 1/2 lines, but it still seems too much for me to comprehend it.
Code below is work in progress, and responsiveness seems to be todays standard, and if anyone can explain to me how to do it, I will be grateful.
<div class="container">
<div class="top">
<div class="t_e1"></div>
<div class="t_e2"></div>
<div class="t_e3"></div>
</div>
<div class="main"></div>
<div class="bottom">
<div class="b_e1"></div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100fv;
background-color: brown;
}
.container {
min-height: 100%;
background-color: aquamarine;
grid-template-columns: 1fr 1fr;
display: grid;
}
.top {
background-color: blue;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.t_e1 {
background-color: antiquewhite;
display: grid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.main {
background-color: blueviolet;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 5;
}
.bottom {
background-color: chartreuse;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
}
.b_e1 {
background-color: coral;
display: grid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 6;
}
[Currently][1]
[Desired effect][2]
[1]: https://i.stack.imgur.com/Vs0lR.jpg
[2]: https://i.stack.imgur.com/wUH7H.jpg
This is my solution:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100fv;
background-color: brown;
}
.container {
min-height: 100%;
background-color: aquamarine;
grid-template-columns: 1fr 1fr;
display: grid;
}
.top {
background-color: blue;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.t_e1 {
background-color: antiquewhite;
display: grid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.main {
background-color: blueviolet;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 5;
}
.bottom {
background-color: chartreuse;
display: grid;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
}
.b_e1 {
background-color: coral;
display: grid;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 6;
}
/*new code from here*/
#media (max-width: 640px) {
.top,
.bottom {
display: flex;
flex-direction: column-reverse;
}
.t_e1,
.t_e2,
.t_e3,
.b_e1 {
display: block;
}
.t_e1,
.b_e1 {
height: 15vh;
}
}
<div class="container">
<div class="top">
<div class="t_e1"></div>
<div class="t_e2"></div>
<div class="t_e3"></div>
</div>
<div class="main"></div>
<div class="bottom">
<div class="b_e1"></div>
</div>
</div>
The media query can be set to the desired "screen size" you want your responsive look to appear.
So the word responsiveness is a bit vague. Do you mean that the grids should be expanding to the width of window? if so that is the default behaviour. Or did you mean grid should stack up vertically when screen width gets small enough. I'd assume that's what you meant.
HTML
<div class="cont">
<div class="a"></div>
<div class="b"></div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.cont {
display: flex;
margin-bottom: 10px;
}
.a,
.b {
flex: 1;
padding: 20px;
}
.a {
background: red;
}
.b {
background-color: blue;
max-width: 300px;
}
#media screen and (max-width: 1000px) {
.cont {
flex-direction: column;
}
.b {
max-width: none;
}
}
Explanation:
I create 2 divs
Each div has two more divs
Container divs have css flexbox property
Child divs get flex: 1 which tells them to expand (learn flexbox properly) https://www.codecademy.com/learn/learn-intermediate-css/modules/layout-with-flexbox
div B has max width so it expands but not more than that
I use media query max-width which makes it that styles under only apply IF the condition is met, the condition here is that width of browser is NOT more than 1000px
In there I change flexbox-direction to column, which means child divs will stack vertically not horizontally
I also remove the max-width on div B
I noticed this happening a couple of weeks ago on a website that I built and have worked on since 2017. On the landing page of this site, there's two sections that are supposed to have a sort of slow parallax scrolling effect that I implemented with straight CSS (no JavaScript.) For some reason, the parallax effect no longer works on any device that I've tried, with several browsers across multiple devices. The CSS hasn't been updated since probably 2019. It seemed to be working a few weeks ago when I had last checked to update the site.
here's the relevant CSS if you don't want to open dev tools. I realize some of this is really shoddy, I've done better as a dev since:
html{
height: 100%;
overflow: hidden;
}
body{
background-color: #322e32;
/*margin: 15px 0 15px 0;*/
padding-top: 65px;
min-height: 100%;
color: #ffffff;
font-family: 'Raleway', sans-serif;
-webkit-perspective: 1px;
perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
}
main{
min-height: 100vh;
overflow: hidden;
display: block;
position: relative;
padding-bottom: 30px; /* footer height */
perspective: 2px;
}
.no-para {
z-index: 2;
background: #322e32;
}
.index-tour{
display: -ms-grid;
display: grid;
-ms-grid-columns: 1.5vw 48vw 1vw 48vw 1.5vw;
grid-template-columns: 1.5vw 48vw 1vw 48vw 1.5vw;;
-ms-grid-rows: 100px 100vh 100px 100vh 75px 100vh 45vh;;
grid-template-rows: 100px 100vh 100px 100vh 75px 100vh 45vh;
}
#tour-header{
-ms-grid-column: 1;
grid-column-start: 1;
-ms-grid-column-span: 5;
grid-column-end: 6;
-ms-grid-row: 1;
grid-row-start: 1;
-ms-grid-row-span: 1;
grid-row-end: 2;
z-index: 2;
background: #322e32;
text-align: center;
}
#tour-gallery{
-ms-grid-column: 1;
grid-column-start: 1;
-ms-grid-column-span: 5;
grid-column-end: 6;
-ms-grid-row: 2;
grid-row-start: 2;
-ms-grid-row-span: 1;
grid-row-end: 3;
}
#tour-gallery:before{
background: url('indexTour1.png');
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
}
#tour-gallery-text{
position: absolute;
left: 50%;
margin-right: -25%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 37%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0 5em;
font-size: 1.3em;
background: #00000061;
border-radius: 80px;
}
#tour-portraits{
-ms-grid-column: 1;
grid-column-start: 1;
-ms-grid-column-span: 5;
grid-column-end: 6;
-ms-grid-row: 3;
grid-row-start: 3;
-ms-grid-row-span: 1;
grid-row-end: 4;
/*height: 100px;
width: 100%;*/
background: #322e32;
z-index: 2;
}
#tour-portraits p {
text-align: center;
}
#tour-pet-portraits{
-ms-grid-column: 2;
grid-column-start: 2;
-ms-grid-column-span: 1;
grid-column-end: 3;
-ms-grid-row: 4;
grid-row-start: 4;
-ms-grid-row-span: 1;
grid-row-end: 5;
background: url('../gallery/01032019A.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 3;
}
#tour-human-portraits{
-ms-grid-column: 4;
grid-column-start: 4;
-ms-grid-column-span: 1;
grid-column-end: 5;
-ms-grid-row: 4;
grid-row-start: 4;
-ms-grid-row-span: 1;
grid-row-end: 5;
background: url('../gallery/79183.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
z-index: 3;
}
#tour-portraits-text{
position: absolute;
/* margin: 54vh 4vw;
padding-right: 7px;
padding-left: 7px;
font-size: 1.3em; */
background: #0000007d;
border-radius: 42px;
text-align: center;
}
#tour-special{
-ms-grid-column: 1;
grid-column-start: 1;
-ms-grid-column-span: 5;
grid-column-end: 6;
-ms-grid-row: 6;
grid-row-start: 6;
-ms-grid-row-span: 1;
grid-row-end: 7;
}
#tour-special:before{
background: url('indexTour2.png');
-webkit-transform: translateZ(-1px) scale(2);
transform: translateZ(-1px) scale(2);
}
And the relevant HTML (via PHP, but I doubt that matters):
<div id='tour-header'>
<h1>A Tour Of The Studio...</h1>
</div>
<div id='tour-gallery' class="parallax-back">
<div id='tour-gallery-text'>
<h2><b>Main Gallery</b></h2>
<p>The Main Gallery includes original works of art by Anni that are available for purchase at reasonable prices.
We normally ship pieces via USPS, but if you're local to the Greater Atlanta Area, we can arrange for pick up.
<b>Please note that we are unable to ship outside of the United States at this time!</b></p><br />
<p style='text-align: center;'>Visit Main Gallery →</p>
</div>
</div>
<div id='tour-portraits'>
<h2><b>Custom Portraits</b></h2>
<p>Commissions For Portraits Are <span style="color: #9bffb5;"><b>Currently Open!</b></span></p>
</div>
<div id='portraits-gap2' class='no-para'></div>
<div id='tour-pet-portraits'>
<div id='tour-portraits-text' class='tour-portraits-text-margins1'>
<h3><b>Pet Portraits</b></h3>
<p>Commission Anni to perfectly capture your furbaby (or fur children) on canvas!</p><br />
<p style='text-align: center;'>Learn More →</p>
</div>
</div>
<div id='portraits-gap1' class='no-para'></div>
<div id='tour-human-portraits' class='no-para'>
<div id='tour-portraits-text' class='tour-portraits-text-margins2'>
<h3><b>People Portraits</b></h3>
<p>Want to see yourself or a loved one painted? Let Anni do it in immaculate detail!</p><br />
<p style='text-align: center;'>Learn More →</p>
</div>
</div>
<div id='portraits-gap3' class='no-para'></div>
<div id='portraits-bottom' class='no-para'></div>
<div id='tour-special' class='parallax-back'>
<div id='tour-gallery-text'>
<h2><b>Special Gallery</b></h2>
<p>Here you can take a look at some of Anni's past commissions, sold/donated original pieces, and select works that are permanently kept in the studio.</p><br />
<p style='text-align: center;'>Visit Special Gallery →</p>
</div>
</div>
Thing is, when I look up other methods of implementing parallax with just CSS, a lot of those CodePens and demos, some as recent as this year, don't work as intended either. Did something happen with the rules of CSS or something? Because this used to work, I swear! Any help is appreciated!
Mine broke too, I am not sure what changed, but if you add
transform-style: preserve-3d;
to your paralax container it should fix it.