:Hover transition on an anchor

I'm scratching my head here: I've got a few divs which transition on hover, but I'm trying to recreate the same on an anchor link and I can't get it to fit. For the life of me, I can't find the reason!

Edit: So I forgot to actually describe my problem, oops!
Basically, the two yellow buttons are what I can make: one transitions, however only the text and not the yellow area is clickable as a link. The other yellow button is fully-clickable, so the complete button is a link, however it doesn't transition. I'd like to make the transition on those yellow buttons to match that of the "project-tile" thumbnails.

Here's my code so far (sorry if the formatting doesn't come through - first post!):

/* This anchor's button isn't fully clickable */

.prolink 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
 transition: transform 350ms;


.prolink:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);



/* This anchor won't transition */

#pro-link-text 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
 transition: transform 350ms;


#pro-link-text:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);

<!-- This transition works -->
<!-- But the surrounding area on this anchor button isn't fully clickable -->
<div class="prolink">
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
</div>
<!-- But this anchor won't transition -->
<a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>

I swear, it's properly formatted in CodePen, haha:

https://codepen.io/fitfingers/pen/mQEPry?editors=1100

Thanks in advance to anyone who can point me in the right direction :)

edited Nov 13 '18 at 13:53

Smollet777

1,3591015

asked Nov 13 '18 at 12:26

James Hooper

add a comment |

Here's my code so far (sorry if the formatting doesn't come through - first post!):

/* This anchor's button isn't fully clickable */

.prolink 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
 transition: transform 350ms;


.prolink:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);



/* This anchor won't transition */

#pro-link-text 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
 transition: transform 350ms;


#pro-link-text:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);

<!-- This transition works -->
<!-- But the surrounding area on this anchor button isn't fully clickable -->
<div class="prolink">
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
</div>
<!-- But this anchor won't transition -->
<a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>

I swear, it's properly formatted in CodePen, haha:

https://codepen.io/fitfingers/pen/mQEPry?editors=1100

Thanks in advance to anyone who can point me in the right direction :)

edited Nov 13 '18 at 13:53

Smollet777

1,3591015

asked Nov 13 '18 at 12:26

James Hooper

add a comment |

Here's my code so far (sorry if the formatting doesn't come through - first post!):

/* This anchor's button isn't fully clickable */

.prolink 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
 transition: transform 350ms;


.prolink:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);



/* This anchor won't transition */

#pro-link-text 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
 transition: transform 350ms;


#pro-link-text:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);

<!-- This transition works -->
<!-- But the surrounding area on this anchor button isn't fully clickable -->
<div class="prolink">
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
</div>
<!-- But this anchor won't transition -->
<a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>

I swear, it's properly formatted in CodePen, haha:

https://codepen.io/fitfingers/pen/mQEPry?editors=1100

Thanks in advance to anyone who can point me in the right direction :)

edited Nov 13 '18 at 13:53

Smollet777

1,3591015

asked Nov 13 '18 at 12:26

James Hooper

Here's my code so far (sorry if the formatting doesn't come through - first post!):

/* This anchor's button isn't fully clickable */

.prolink 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
 transition: transform 350ms;


.prolink:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);



/* This anchor won't transition */

#pro-link-text 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
 transition: transform 350ms;


#pro-link-text:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);

<!-- This transition works -->
<!-- But the surrounding area on this anchor button isn't fully clickable -->
<div class="prolink">
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
</div>
<!-- But this anchor won't transition -->
<a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>

I swear, it's properly formatted in CodePen, haha:

https://codepen.io/fitfingers/pen/mQEPry?editors=1100

Thanks in advance to anyone who can point me in the right direction :)

/* This anchor's button isn't fully clickable */

.prolink 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
 transition: transform 350ms;


.prolink:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);



/* This anchor won't transition */

#pro-link-text 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
 transition: transform 350ms;


#pro-link-text:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);

<!-- This transition works -->
<!-- But the surrounding area on this anchor button isn't fully clickable -->
<div class="prolink">
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
</div>
<!-- But this anchor won't transition -->
<a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>

/* This anchor's button isn't fully clickable */

.prolink 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
 transition: transform 350ms;


.prolink:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);



/* This anchor won't transition */

#pro-link-text 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.3);
 transition: transform 350ms;


#pro-link-text:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);

<!-- This transition works -->
<!-- But the surrounding area on this anchor button isn't fully clickable -->
<div class="prolink">
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
</div>
<!-- But this anchor won't transition -->
<a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>

html css hover anchor transition

edited Nov 13 '18 at 13:53

Smollet777

1,3591015

asked Nov 13 '18 at 12:26

James Hooper

edited Nov 13 '18 at 13:53

Smollet777

1,3591015

asked Nov 13 '18 at 12:26

James Hooper

edited Nov 13 '18 at 13:53

Smollet777

1,3591015

edited Nov 13 '18 at 13:53

Smollet777

1,3591015

edited Nov 13 '18 at 13:53

Smollet777

1,3591015

asked Nov 13 '18 at 12:26

James Hooper

asked Nov 13 '18 at 12:26

James Hooper

asked Nov 13 '18 at 12:26

James Hooper

add a comment |

1 Answer
1

active

oldest

votes

Updated my answer to be more relevant to your question. as mentioned in my comment below you need to set a display property and an initial transform state.

* 
 font-family: "Poor Story", sans-serif;


:root 
 --deepblue: #38b0bd;
 --hoveryellow: #fffe68;
 --babyblue: #D6F5F5;


body 
 margin: 0;
 box-sizing: border-box;
 background: var(--babyblue);


p 
 font-size: 18px;


 /* Navigation bar */
#navbar 
 position: fixed;
 top: 0;
 width: 100%;
 background: var(--deepblue);
 display: flex;
 flex-direction: row-reverse;
 z-index: 3;


#navbar a 
 padding: 32px;
 text-decoration: none;
 color: white;
 font-size: 20px;
 font-weight: bold;


#navbar a:hover 
 background: var(--hoveryellow);
 color: #444;


#navbar-shadow 
 position: fixed;
 top: 57px;
 height: 32px;
 width: 100%;
 box-shadow: 0 5px 8px 0 rgba(0,0,0,0.25);
 z-index: 1;


/* Welcome screen */
#welcome-section 
 background: var(--deepblue);
 text-align: center;
 position: absolute;
 width: 100%;
 color: white;
 height: 60vh;
 top: 0;
 padding-top: 40vh;
 z-index: 2;


/* Projects: flexbox design */
#projects 
 margin-top: 100vh;
 padding: 40px 30px;
 text-align: center;


#projectbox 
 display: flex;
 flex-wrap: wrap;
 justify-content: center;


.project-tile 
 flex-basis: 300px;
 height: 250px;
 margin: 40px 70px;
 background: black;
 text-align: center;
 box-shadow: 0 0 12px 3px rgba(0,0,0,0.2);
 border-radius: 5px;
 transition: transform 350ms;


.project-tile:hover 
 transform: scale(1.08);


.project-tile img 
 width: 298px;
 border-radius: 5px;
 border: 2px solid black;


.tile-text 
 background: var(--deepblue);
 padding: 17px;
 border-radius: 5px;
 margin-top: -7px;
 font-size: 22px;
 border: 2px solid black;


#projects a 
 color: black;
 text-decoration: none;


/* This anchor's button isn't fully clickable */
.prolink 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;


.prolink:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);


/* This anchor won't transition */
#pro-link-text 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;
 transform:scale(1);
 display:inline-block;


#pro-link-text:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet" type="text/css">

<!-- Code begins here -->

<!-- Navigation bar -->
<nav id="navbar">
 <a class="navlink" href="#contact">Contact</a>
 <a class="navlink" href="#projects">Projects</a>
 <a class="navlink" href="#welcome-section">Home</a>
</nav>

<div id="navbar-shadow">
</div>

<!-- Welcome landing section -->
<div id="welcome-section" autofocus>
 <h1>Hi, I'm James Hooper.</h1>
 <p>...and I'm your next Frontend Developer :)</p>
</div>

<!-- Projects -->
<div id="projects">
 <h2>Some projects of mine:</h2>
 <div id="projectbox">
 <a href="https://codepen.io/fitfingers/full/MzyeOY/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2ivh1m1.png" alt="Screenshot of TWIG landing page.">
 <div class="tile-text">TWIG Landing Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/eQzOKQ/" target="_blank" class="project-tile">
 <img src="http://i64.tinypic.com/2nhjd4w.png" alt="Screenshot of technical documentation page.">
 <div class="tile-text">Technical Documentation Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/YRwyev/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2624p3o.png" alt="Screenshot of Dr. Borlaug tribute page.">
 <div class="tile-text">Tribute Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/QJyKap/" target="_blank" class="project-tile">
 <img src="http://i65.tinypic.com/1o7vid.png" alt="Screenshot of survey form.">
 <div class="tile-text">Survey Form</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/JeGjdW/" target="_blank" class="project-tile">
 <img src="http://i67.tinypic.com/21cy2qr.png" alt="Screenshot of responsive web layout.">
 <div class="tile-text">Responsive Web Layout</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/mQEPry/" target="_blank" class="project-tile">
 <img src="http://i68.tinypic.com/n2l7dh.png" alt="Screenshot of this page #META.">
 <div class="tile-text">Current Project #meta</div>
 </a>
 </div>
 <!-- This anchor button isn't fully clickable -->
 <div class="prolink">
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
 </div>
 <!-- But this anchor won't transition -->
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>
</div>

<div id="contact">
 
</div>

edited Nov 13 '18 at 12:49

answered Nov 13 '18 at 12:34

Aaron McGuire

4328

Oh actually, I wasn't so clear on where I have a problem, sorry! The problem is the yellow button at the bottom of the page which says "More Projects". I've made two to show the two options I can make, and I want the button to transition the same way that it does when you hover over the thumbnail/project-tiles. The problem is that I can only make the transition take place if I put the code in the anchor link, but then the yellow area isn't clickable, only the anchor text is.

– James Hooper
Nov 13 '18 at 12:39

Ah in that case your anchor tag #pro-link-text ( the second button that currently doesn't move, you need to add display: inline-block; & an initial transform scale state e.g. transform:scale(1); the scale transition wont work without setting a display property.

– Aaron McGuire
Nov 13 '18 at 12:45

That's absolutely excellent, thank you so much! I never would have found that :) So, the scale transition doesn't work without setting a display, however my "project-tile" doesn't have a display set, though it works - does that one function as it's within a flex container or something different? Thanks again :)

– James Hooper
Nov 13 '18 at 13:11

because it's an a tag it's default display is inline therefore it ignores any transforms where as your project tiles are in a div and so display by default as a block element. Glad it worked for you!

– Aaron McGuire
Nov 13 '18 at 13:14

Awesome, that really clears it up :) Thanks a lot! :)

– James Hooper
Nov 13 '18 at 15:13

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53280991%2fhover-transition-on-an-anchor%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Updated my answer to be more relevant to your question. as mentioned in my comment below you need to set a display property and an initial transform state.

* 
 font-family: "Poor Story", sans-serif;


:root 
 --deepblue: #38b0bd;
 --hoveryellow: #fffe68;
 --babyblue: #D6F5F5;


body 
 margin: 0;
 box-sizing: border-box;
 background: var(--babyblue);


p 
 font-size: 18px;


 /* Navigation bar */
#navbar 
 position: fixed;
 top: 0;
 width: 100%;
 background: var(--deepblue);
 display: flex;
 flex-direction: row-reverse;
 z-index: 3;


#navbar a 
 padding: 32px;
 text-decoration: none;
 color: white;
 font-size: 20px;
 font-weight: bold;


#navbar a:hover 
 background: var(--hoveryellow);
 color: #444;


#navbar-shadow 
 position: fixed;
 top: 57px;
 height: 32px;
 width: 100%;
 box-shadow: 0 5px 8px 0 rgba(0,0,0,0.25);
 z-index: 1;


/* Welcome screen */
#welcome-section 
 background: var(--deepblue);
 text-align: center;
 position: absolute;
 width: 100%;
 color: white;
 height: 60vh;
 top: 0;
 padding-top: 40vh;
 z-index: 2;


/* Projects: flexbox design */
#projects 
 margin-top: 100vh;
 padding: 40px 30px;
 text-align: center;


#projectbox 
 display: flex;
 flex-wrap: wrap;
 justify-content: center;


.project-tile 
 flex-basis: 300px;
 height: 250px;
 margin: 40px 70px;
 background: black;
 text-align: center;
 box-shadow: 0 0 12px 3px rgba(0,0,0,0.2);
 border-radius: 5px;
 transition: transform 350ms;


.project-tile:hover 
 transform: scale(1.08);


.project-tile img 
 width: 298px;
 border-radius: 5px;
 border: 2px solid black;


.tile-text 
 background: var(--deepblue);
 padding: 17px;
 border-radius: 5px;
 margin-top: -7px;
 font-size: 22px;
 border: 2px solid black;


#projects a 
 color: black;
 text-decoration: none;


/* This anchor's button isn't fully clickable */
.prolink 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;


.prolink:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);


/* This anchor won't transition */
#pro-link-text 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;
 transform:scale(1);
 display:inline-block;


#pro-link-text:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet" type="text/css">

<!-- Code begins here -->

<!-- Navigation bar -->
<nav id="navbar">
 <a class="navlink" href="#contact">Contact</a>
 <a class="navlink" href="#projects">Projects</a>
 <a class="navlink" href="#welcome-section">Home</a>
</nav>

<div id="navbar-shadow">
</div>

<!-- Welcome landing section -->
<div id="welcome-section" autofocus>
 <h1>Hi, I'm James Hooper.</h1>
 <p>...and I'm your next Frontend Developer :)</p>
</div>

<!-- Projects -->
<div id="projects">
 <h2>Some projects of mine:</h2>
 <div id="projectbox">
 <a href="https://codepen.io/fitfingers/full/MzyeOY/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2ivh1m1.png" alt="Screenshot of TWIG landing page.">
 <div class="tile-text">TWIG Landing Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/eQzOKQ/" target="_blank" class="project-tile">
 <img src="http://i64.tinypic.com/2nhjd4w.png" alt="Screenshot of technical documentation page.">
 <div class="tile-text">Technical Documentation Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/YRwyev/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2624p3o.png" alt="Screenshot of Dr. Borlaug tribute page.">
 <div class="tile-text">Tribute Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/QJyKap/" target="_blank" class="project-tile">
 <img src="http://i65.tinypic.com/1o7vid.png" alt="Screenshot of survey form.">
 <div class="tile-text">Survey Form</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/JeGjdW/" target="_blank" class="project-tile">
 <img src="http://i67.tinypic.com/21cy2qr.png" alt="Screenshot of responsive web layout.">
 <div class="tile-text">Responsive Web Layout</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/mQEPry/" target="_blank" class="project-tile">
 <img src="http://i68.tinypic.com/n2l7dh.png" alt="Screenshot of this page #META.">
 <div class="tile-text">Current Project #meta</div>
 </a>
 </div>
 <!-- This anchor button isn't fully clickable -->
 <div class="prolink">
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
 </div>
 <!-- But this anchor won't transition -->
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>
</div>

<div id="contact">
 
</div>

edited Nov 13 '18 at 12:49

answered Nov 13 '18 at 12:34

Aaron McGuire

4328

Oh actually, I wasn't so clear on where I have a problem, sorry! The problem is the yellow button at the bottom of the page which says "More Projects". I've made two to show the two options I can make, and I want the button to transition the same way that it does when you hover over the thumbnail/project-tiles. The problem is that I can only make the transition take place if I put the code in the anchor link, but then the yellow area isn't clickable, only the anchor text is.

– James Hooper
Nov 13 '18 at 12:39

Ah in that case your anchor tag #pro-link-text ( the second button that currently doesn't move, you need to add display: inline-block; & an initial transform scale state e.g. transform:scale(1); the scale transition wont work without setting a display property.

– Aaron McGuire
Nov 13 '18 at 12:45

That's absolutely excellent, thank you so much! I never would have found that :) So, the scale transition doesn't work without setting a display, however my "project-tile" doesn't have a display set, though it works - does that one function as it's within a flex container or something different? Thanks again :)

– James Hooper
Nov 13 '18 at 13:11

because it's an a tag it's default display is inline therefore it ignores any transforms where as your project tiles are in a div and so display by default as a block element. Glad it worked for you!

– Aaron McGuire
Nov 13 '18 at 13:14

Awesome, that really clears it up :) Thanks a lot! :)

– James Hooper
Nov 13 '18 at 15:13

add a comment |

Updated my answer to be more relevant to your question. as mentioned in my comment below you need to set a display property and an initial transform state.

* 
 font-family: "Poor Story", sans-serif;


:root 
 --deepblue: #38b0bd;
 --hoveryellow: #fffe68;
 --babyblue: #D6F5F5;


body 
 margin: 0;
 box-sizing: border-box;
 background: var(--babyblue);


p 
 font-size: 18px;


 /* Navigation bar */
#navbar 
 position: fixed;
 top: 0;
 width: 100%;
 background: var(--deepblue);
 display: flex;
 flex-direction: row-reverse;
 z-index: 3;


#navbar a 
 padding: 32px;
 text-decoration: none;
 color: white;
 font-size: 20px;
 font-weight: bold;


#navbar a:hover 
 background: var(--hoveryellow);
 color: #444;


#navbar-shadow 
 position: fixed;
 top: 57px;
 height: 32px;
 width: 100%;
 box-shadow: 0 5px 8px 0 rgba(0,0,0,0.25);
 z-index: 1;


/* Welcome screen */
#welcome-section 
 background: var(--deepblue);
 text-align: center;
 position: absolute;
 width: 100%;
 color: white;
 height: 60vh;
 top: 0;
 padding-top: 40vh;
 z-index: 2;


/* Projects: flexbox design */
#projects 
 margin-top: 100vh;
 padding: 40px 30px;
 text-align: center;


#projectbox 
 display: flex;
 flex-wrap: wrap;
 justify-content: center;


.project-tile 
 flex-basis: 300px;
 height: 250px;
 margin: 40px 70px;
 background: black;
 text-align: center;
 box-shadow: 0 0 12px 3px rgba(0,0,0,0.2);
 border-radius: 5px;
 transition: transform 350ms;


.project-tile:hover 
 transform: scale(1.08);


.project-tile img 
 width: 298px;
 border-radius: 5px;
 border: 2px solid black;


.tile-text 
 background: var(--deepblue);
 padding: 17px;
 border-radius: 5px;
 margin-top: -7px;
 font-size: 22px;
 border: 2px solid black;


#projects a 
 color: black;
 text-decoration: none;


/* This anchor's button isn't fully clickable */
.prolink 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;


.prolink:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);


/* This anchor won't transition */
#pro-link-text 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;
 transform:scale(1);
 display:inline-block;


#pro-link-text:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet" type="text/css">

<!-- Code begins here -->

<!-- Navigation bar -->
<nav id="navbar">
 <a class="navlink" href="#contact">Contact</a>
 <a class="navlink" href="#projects">Projects</a>
 <a class="navlink" href="#welcome-section">Home</a>
</nav>

<div id="navbar-shadow">
</div>

<!-- Welcome landing section -->
<div id="welcome-section" autofocus>
 <h1>Hi, I'm James Hooper.</h1>
 <p>...and I'm your next Frontend Developer :)</p>
</div>

<!-- Projects -->
<div id="projects">
 <h2>Some projects of mine:</h2>
 <div id="projectbox">
 <a href="https://codepen.io/fitfingers/full/MzyeOY/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2ivh1m1.png" alt="Screenshot of TWIG landing page.">
 <div class="tile-text">TWIG Landing Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/eQzOKQ/" target="_blank" class="project-tile">
 <img src="http://i64.tinypic.com/2nhjd4w.png" alt="Screenshot of technical documentation page.">
 <div class="tile-text">Technical Documentation Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/YRwyev/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2624p3o.png" alt="Screenshot of Dr. Borlaug tribute page.">
 <div class="tile-text">Tribute Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/QJyKap/" target="_blank" class="project-tile">
 <img src="http://i65.tinypic.com/1o7vid.png" alt="Screenshot of survey form.">
 <div class="tile-text">Survey Form</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/JeGjdW/" target="_blank" class="project-tile">
 <img src="http://i67.tinypic.com/21cy2qr.png" alt="Screenshot of responsive web layout.">
 <div class="tile-text">Responsive Web Layout</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/mQEPry/" target="_blank" class="project-tile">
 <img src="http://i68.tinypic.com/n2l7dh.png" alt="Screenshot of this page #META.">
 <div class="tile-text">Current Project #meta</div>
 </a>
 </div>
 <!-- This anchor button isn't fully clickable -->
 <div class="prolink">
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
 </div>
 <!-- But this anchor won't transition -->
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>
</div>

<div id="contact">
 
</div>

edited Nov 13 '18 at 12:49

answered Nov 13 '18 at 12:34

Aaron McGuire

4328

Oh actually, I wasn't so clear on where I have a problem, sorry! The problem is the yellow button at the bottom of the page which says "More Projects". I've made two to show the two options I can make, and I want the button to transition the same way that it does when you hover over the thumbnail/project-tiles. The problem is that I can only make the transition take place if I put the code in the anchor link, but then the yellow area isn't clickable, only the anchor text is.

– James Hooper
Nov 13 '18 at 12:39

Ah in that case your anchor tag #pro-link-text ( the second button that currently doesn't move, you need to add display: inline-block; & an initial transform scale state e.g. transform:scale(1); the scale transition wont work without setting a display property.

– Aaron McGuire
Nov 13 '18 at 12:45

That's absolutely excellent, thank you so much! I never would have found that :) So, the scale transition doesn't work without setting a display, however my "project-tile" doesn't have a display set, though it works - does that one function as it's within a flex container or something different? Thanks again :)

– James Hooper
Nov 13 '18 at 13:11

because it's an a tag it's default display is inline therefore it ignores any transforms where as your project tiles are in a div and so display by default as a block element. Glad it worked for you!

– Aaron McGuire
Nov 13 '18 at 13:14

Awesome, that really clears it up :) Thanks a lot! :)

– James Hooper
Nov 13 '18 at 15:13

add a comment |

Updated my answer to be more relevant to your question. as mentioned in my comment below you need to set a display property and an initial transform state.

* 
 font-family: "Poor Story", sans-serif;


:root 
 --deepblue: #38b0bd;
 --hoveryellow: #fffe68;
 --babyblue: #D6F5F5;


body 
 margin: 0;
 box-sizing: border-box;
 background: var(--babyblue);


p 
 font-size: 18px;


 /* Navigation bar */
#navbar 
 position: fixed;
 top: 0;
 width: 100%;
 background: var(--deepblue);
 display: flex;
 flex-direction: row-reverse;
 z-index: 3;


#navbar a 
 padding: 32px;
 text-decoration: none;
 color: white;
 font-size: 20px;
 font-weight: bold;


#navbar a:hover 
 background: var(--hoveryellow);
 color: #444;


#navbar-shadow 
 position: fixed;
 top: 57px;
 height: 32px;
 width: 100%;
 box-shadow: 0 5px 8px 0 rgba(0,0,0,0.25);
 z-index: 1;


/* Welcome screen */
#welcome-section 
 background: var(--deepblue);
 text-align: center;
 position: absolute;
 width: 100%;
 color: white;
 height: 60vh;
 top: 0;
 padding-top: 40vh;
 z-index: 2;


/* Projects: flexbox design */
#projects 
 margin-top: 100vh;
 padding: 40px 30px;
 text-align: center;


#projectbox 
 display: flex;
 flex-wrap: wrap;
 justify-content: center;


.project-tile 
 flex-basis: 300px;
 height: 250px;
 margin: 40px 70px;
 background: black;
 text-align: center;
 box-shadow: 0 0 12px 3px rgba(0,0,0,0.2);
 border-radius: 5px;
 transition: transform 350ms;


.project-tile:hover 
 transform: scale(1.08);


.project-tile img 
 width: 298px;
 border-radius: 5px;
 border: 2px solid black;


.tile-text 
 background: var(--deepblue);
 padding: 17px;
 border-radius: 5px;
 margin-top: -7px;
 font-size: 22px;
 border: 2px solid black;


#projects a 
 color: black;
 text-decoration: none;


/* This anchor's button isn't fully clickable */
.prolink 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;


.prolink:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);


/* This anchor won't transition */
#pro-link-text 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;
 transform:scale(1);
 display:inline-block;


#pro-link-text:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet" type="text/css">

<!-- Code begins here -->

<!-- Navigation bar -->
<nav id="navbar">
 <a class="navlink" href="#contact">Contact</a>
 <a class="navlink" href="#projects">Projects</a>
 <a class="navlink" href="#welcome-section">Home</a>
</nav>

<div id="navbar-shadow">
</div>

<!-- Welcome landing section -->
<div id="welcome-section" autofocus>
 <h1>Hi, I'm James Hooper.</h1>
 <p>...and I'm your next Frontend Developer :)</p>
</div>

<!-- Projects -->
<div id="projects">
 <h2>Some projects of mine:</h2>
 <div id="projectbox">
 <a href="https://codepen.io/fitfingers/full/MzyeOY/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2ivh1m1.png" alt="Screenshot of TWIG landing page.">
 <div class="tile-text">TWIG Landing Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/eQzOKQ/" target="_blank" class="project-tile">
 <img src="http://i64.tinypic.com/2nhjd4w.png" alt="Screenshot of technical documentation page.">
 <div class="tile-text">Technical Documentation Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/YRwyev/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2624p3o.png" alt="Screenshot of Dr. Borlaug tribute page.">
 <div class="tile-text">Tribute Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/QJyKap/" target="_blank" class="project-tile">
 <img src="http://i65.tinypic.com/1o7vid.png" alt="Screenshot of survey form.">
 <div class="tile-text">Survey Form</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/JeGjdW/" target="_blank" class="project-tile">
 <img src="http://i67.tinypic.com/21cy2qr.png" alt="Screenshot of responsive web layout.">
 <div class="tile-text">Responsive Web Layout</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/mQEPry/" target="_blank" class="project-tile">
 <img src="http://i68.tinypic.com/n2l7dh.png" alt="Screenshot of this page #META.">
 <div class="tile-text">Current Project #meta</div>
 </a>
 </div>
 <!-- This anchor button isn't fully clickable -->
 <div class="prolink">
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
 </div>
 <!-- But this anchor won't transition -->
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>
</div>

<div id="contact">
 
</div>

edited Nov 13 '18 at 12:49

answered Nov 13 '18 at 12:34

Aaron McGuire

4328

Updated my answer to be more relevant to your question. as mentioned in my comment below you need to set a display property and an initial transform state.

* 
 font-family: "Poor Story", sans-serif;


:root 
 --deepblue: #38b0bd;
 --hoveryellow: #fffe68;
 --babyblue: #D6F5F5;


body 
 margin: 0;
 box-sizing: border-box;
 background: var(--babyblue);


p 
 font-size: 18px;


 /* Navigation bar */
#navbar 
 position: fixed;
 top: 0;
 width: 100%;
 background: var(--deepblue);
 display: flex;
 flex-direction: row-reverse;
 z-index: 3;


#navbar a 
 padding: 32px;
 text-decoration: none;
 color: white;
 font-size: 20px;
 font-weight: bold;


#navbar a:hover 
 background: var(--hoveryellow);
 color: #444;


#navbar-shadow 
 position: fixed;
 top: 57px;
 height: 32px;
 width: 100%;
 box-shadow: 0 5px 8px 0 rgba(0,0,0,0.25);
 z-index: 1;


/* Welcome screen */
#welcome-section 
 background: var(--deepblue);
 text-align: center;
 position: absolute;
 width: 100%;
 color: white;
 height: 60vh;
 top: 0;
 padding-top: 40vh;
 z-index: 2;


/* Projects: flexbox design */
#projects 
 margin-top: 100vh;
 padding: 40px 30px;
 text-align: center;


#projectbox 
 display: flex;
 flex-wrap: wrap;
 justify-content: center;


.project-tile 
 flex-basis: 300px;
 height: 250px;
 margin: 40px 70px;
 background: black;
 text-align: center;
 box-shadow: 0 0 12px 3px rgba(0,0,0,0.2);
 border-radius: 5px;
 transition: transform 350ms;


.project-tile:hover 
 transform: scale(1.08);


.project-tile img 
 width: 298px;
 border-radius: 5px;
 border: 2px solid black;


.tile-text 
 background: var(--deepblue);
 padding: 17px;
 border-radius: 5px;
 margin-top: -7px;
 font-size: 22px;
 border: 2px solid black;


#projects a 
 color: black;
 text-decoration: none;


/* This anchor's button isn't fully clickable */
.prolink 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;


.prolink:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);


/* This anchor won't transition */
#pro-link-text 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;
 transform:scale(1);
 display:inline-block;


#pro-link-text:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet" type="text/css">

<!-- Code begins here -->

<!-- Navigation bar -->
<nav id="navbar">
 <a class="navlink" href="#contact">Contact</a>
 <a class="navlink" href="#projects">Projects</a>
 <a class="navlink" href="#welcome-section">Home</a>
</nav>

<div id="navbar-shadow">
</div>

<!-- Welcome landing section -->
<div id="welcome-section" autofocus>
 <h1>Hi, I'm James Hooper.</h1>
 <p>...and I'm your next Frontend Developer :)</p>
</div>

<!-- Projects -->
<div id="projects">
 <h2>Some projects of mine:</h2>
 <div id="projectbox">
 <a href="https://codepen.io/fitfingers/full/MzyeOY/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2ivh1m1.png" alt="Screenshot of TWIG landing page.">
 <div class="tile-text">TWIG Landing Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/eQzOKQ/" target="_blank" class="project-tile">
 <img src="http://i64.tinypic.com/2nhjd4w.png" alt="Screenshot of technical documentation page.">
 <div class="tile-text">Technical Documentation Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/YRwyev/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2624p3o.png" alt="Screenshot of Dr. Borlaug tribute page.">
 <div class="tile-text">Tribute Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/QJyKap/" target="_blank" class="project-tile">
 <img src="http://i65.tinypic.com/1o7vid.png" alt="Screenshot of survey form.">
 <div class="tile-text">Survey Form</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/JeGjdW/" target="_blank" class="project-tile">
 <img src="http://i67.tinypic.com/21cy2qr.png" alt="Screenshot of responsive web layout.">
 <div class="tile-text">Responsive Web Layout</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/mQEPry/" target="_blank" class="project-tile">
 <img src="http://i68.tinypic.com/n2l7dh.png" alt="Screenshot of this page #META.">
 <div class="tile-text">Current Project #meta</div>
 </a>
 </div>
 <!-- This anchor button isn't fully clickable -->
 <div class="prolink">
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
 </div>
 <!-- But this anchor won't transition -->
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>
</div>

<div id="contact">
 
</div>

* 
 font-family: "Poor Story", sans-serif;


:root 
 --deepblue: #38b0bd;
 --hoveryellow: #fffe68;
 --babyblue: #D6F5F5;


body 
 margin: 0;
 box-sizing: border-box;
 background: var(--babyblue);


p 
 font-size: 18px;


 /* Navigation bar */
#navbar 
 position: fixed;
 top: 0;
 width: 100%;
 background: var(--deepblue);
 display: flex;
 flex-direction: row-reverse;
 z-index: 3;


#navbar a 
 padding: 32px;
 text-decoration: none;
 color: white;
 font-size: 20px;
 font-weight: bold;


#navbar a:hover 
 background: var(--hoveryellow);
 color: #444;


#navbar-shadow 
 position: fixed;
 top: 57px;
 height: 32px;
 width: 100%;
 box-shadow: 0 5px 8px 0 rgba(0,0,0,0.25);
 z-index: 1;


/* Welcome screen */
#welcome-section 
 background: var(--deepblue);
 text-align: center;
 position: absolute;
 width: 100%;
 color: white;
 height: 60vh;
 top: 0;
 padding-top: 40vh;
 z-index: 2;


/* Projects: flexbox design */
#projects 
 margin-top: 100vh;
 padding: 40px 30px;
 text-align: center;


#projectbox 
 display: flex;
 flex-wrap: wrap;
 justify-content: center;


.project-tile 
 flex-basis: 300px;
 height: 250px;
 margin: 40px 70px;
 background: black;
 text-align: center;
 box-shadow: 0 0 12px 3px rgba(0,0,0,0.2);
 border-radius: 5px;
 transition: transform 350ms;


.project-tile:hover 
 transform: scale(1.08);


.project-tile img 
 width: 298px;
 border-radius: 5px;
 border: 2px solid black;


.tile-text 
 background: var(--deepblue);
 padding: 17px;
 border-radius: 5px;
 margin-top: -7px;
 font-size: 22px;
 border: 2px solid black;


#projects a 
 color: black;
 text-decoration: none;


/* This anchor's button isn't fully clickable */
.prolink 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;


.prolink:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);


/* This anchor won't transition */
#pro-link-text 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;
 transform:scale(1);
 display:inline-block;


#pro-link-text:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet" type="text/css">

<!-- Code begins here -->

<!-- Navigation bar -->
<nav id="navbar">
 <a class="navlink" href="#contact">Contact</a>
 <a class="navlink" href="#projects">Projects</a>
 <a class="navlink" href="#welcome-section">Home</a>
</nav>

<div id="navbar-shadow">
</div>

<!-- Welcome landing section -->
<div id="welcome-section" autofocus>
 <h1>Hi, I'm James Hooper.</h1>
 <p>...and I'm your next Frontend Developer :)</p>
</div>

<!-- Projects -->
<div id="projects">
 <h2>Some projects of mine:</h2>
 <div id="projectbox">
 <a href="https://codepen.io/fitfingers/full/MzyeOY/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2ivh1m1.png" alt="Screenshot of TWIG landing page.">
 <div class="tile-text">TWIG Landing Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/eQzOKQ/" target="_blank" class="project-tile">
 <img src="http://i64.tinypic.com/2nhjd4w.png" alt="Screenshot of technical documentation page.">
 <div class="tile-text">Technical Documentation Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/YRwyev/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2624p3o.png" alt="Screenshot of Dr. Borlaug tribute page.">
 <div class="tile-text">Tribute Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/QJyKap/" target="_blank" class="project-tile">
 <img src="http://i65.tinypic.com/1o7vid.png" alt="Screenshot of survey form.">
 <div class="tile-text">Survey Form</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/JeGjdW/" target="_blank" class="project-tile">
 <img src="http://i67.tinypic.com/21cy2qr.png" alt="Screenshot of responsive web layout.">
 <div class="tile-text">Responsive Web Layout</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/mQEPry/" target="_blank" class="project-tile">
 <img src="http://i68.tinypic.com/n2l7dh.png" alt="Screenshot of this page #META.">
 <div class="tile-text">Current Project #meta</div>
 </a>
 </div>
 <!-- This anchor button isn't fully clickable -->
 <div class="prolink">
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
 </div>
 <!-- But this anchor won't transition -->
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>
</div>

<div id="contact">
 
</div>

* 
 font-family: "Poor Story", sans-serif;


:root 
 --deepblue: #38b0bd;
 --hoveryellow: #fffe68;
 --babyblue: #D6F5F5;


body 
 margin: 0;
 box-sizing: border-box;
 background: var(--babyblue);


p 
 font-size: 18px;


 /* Navigation bar */
#navbar 
 position: fixed;
 top: 0;
 width: 100%;
 background: var(--deepblue);
 display: flex;
 flex-direction: row-reverse;
 z-index: 3;


#navbar a 
 padding: 32px;
 text-decoration: none;
 color: white;
 font-size: 20px;
 font-weight: bold;


#navbar a:hover 
 background: var(--hoveryellow);
 color: #444;


#navbar-shadow 
 position: fixed;
 top: 57px;
 height: 32px;
 width: 100%;
 box-shadow: 0 5px 8px 0 rgba(0,0,0,0.25);
 z-index: 1;


/* Welcome screen */
#welcome-section 
 background: var(--deepblue);
 text-align: center;
 position: absolute;
 width: 100%;
 color: white;
 height: 60vh;
 top: 0;
 padding-top: 40vh;
 z-index: 2;


/* Projects: flexbox design */
#projects 
 margin-top: 100vh;
 padding: 40px 30px;
 text-align: center;


#projectbox 
 display: flex;
 flex-wrap: wrap;
 justify-content: center;


.project-tile 
 flex-basis: 300px;
 height: 250px;
 margin: 40px 70px;
 background: black;
 text-align: center;
 box-shadow: 0 0 12px 3px rgba(0,0,0,0.2);
 border-radius: 5px;
 transition: transform 350ms;


.project-tile:hover 
 transform: scale(1.08);


.project-tile img 
 width: 298px;
 border-radius: 5px;
 border: 2px solid black;


.tile-text 
 background: var(--deepblue);
 padding: 17px;
 border-radius: 5px;
 margin-top: -7px;
 font-size: 22px;
 border: 2px solid black;


#projects a 
 color: black;
 text-decoration: none;


/* This anchor's button isn't fully clickable */
.prolink 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;


.prolink:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);


/* This anchor won't transition */
#pro-link-text 
 background: yellow;
 width: 100px;
 padding: 10px 20px;
 margin: 30px auto;
 border: 2px solid black;
 border-radius: 25px;
 box-shadow: 0 3px 8px 0 rgba(0,0,0,0.3);
 transition: transform 350ms;
 transform:scale(1);
 display:inline-block;


#pro-link-text:hover 
 background: var(--hoveryellow);
 color: var(--deepblue);
 transform: scale(1.08);

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet" type="text/css">

<!-- Code begins here -->

<!-- Navigation bar -->
<nav id="navbar">
 <a class="navlink" href="#contact">Contact</a>
 <a class="navlink" href="#projects">Projects</a>
 <a class="navlink" href="#welcome-section">Home</a>
</nav>

<div id="navbar-shadow">
</div>

<!-- Welcome landing section -->
<div id="welcome-section" autofocus>
 <h1>Hi, I'm James Hooper.</h1>
 <p>...and I'm your next Frontend Developer :)</p>
</div>

<!-- Projects -->
<div id="projects">
 <h2>Some projects of mine:</h2>
 <div id="projectbox">
 <a href="https://codepen.io/fitfingers/full/MzyeOY/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2ivh1m1.png" alt="Screenshot of TWIG landing page.">
 <div class="tile-text">TWIG Landing Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/eQzOKQ/" target="_blank" class="project-tile">
 <img src="http://i64.tinypic.com/2nhjd4w.png" alt="Screenshot of technical documentation page.">
 <div class="tile-text">Technical Documentation Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/YRwyev/" target="_blank" class="project-tile">
 <img src="http://i63.tinypic.com/2624p3o.png" alt="Screenshot of Dr. Borlaug tribute page.">
 <div class="tile-text">Tribute Page</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/QJyKap/" target="_blank" class="project-tile">
 <img src="http://i65.tinypic.com/1o7vid.png" alt="Screenshot of survey form.">
 <div class="tile-text">Survey Form</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/JeGjdW/" target="_blank" class="project-tile">
 <img src="http://i67.tinypic.com/21cy2qr.png" alt="Screenshot of responsive web layout.">
 <div class="tile-text">Responsive Web Layout</div>
 </a>
 <a href="https://codepen.io/fitfingers/full/mQEPry/" target="_blank" class="project-tile">
 <img src="http://i68.tinypic.com/n2l7dh.png" alt="Screenshot of this page #META.">
 <div class="tile-text">Current Project #meta</div>
 </a>
 </div>
 <!-- This anchor button isn't fully clickable -->
 <div class="prolink">
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="profile-link">More Projects</a>
 </div>
 <!-- But this anchor won't transition -->
 <a href="https://www.freecodecamp.org/fitfingers" target="_blank" id="pro-link-text">More Projects</a>
</div>

<div id="contact">
 
</div>

edited Nov 13 '18 at 12:49

answered Nov 13 '18 at 12:34

Aaron McGuire

4328

edited Nov 13 '18 at 12:49

answered Nov 13 '18 at 12:34

Aaron McGuire

4328

answered Nov 13 '18 at 12:34

Aaron McGuire

4328

answered Nov 13 '18 at 12:34

Aaron McGuire

4328

Oh actually, I wasn't so clear on where I have a problem, sorry! The problem is the yellow button at the bottom of the page which says "More Projects". I've made two to show the two options I can make, and I want the button to transition the same way that it does when you hover over the thumbnail/project-tiles. The problem is that I can only make the transition take place if I put the code in the anchor link, but then the yellow area isn't clickable, only the anchor text is.

– James Hooper
Nov 13 '18 at 12:39

Ah in that case your anchor tag #pro-link-text ( the second button that currently doesn't move, you need to add display: inline-block; & an initial transform scale state e.g. transform:scale(1); the scale transition wont work without setting a display property.

– Aaron McGuire
Nov 13 '18 at 12:45

That's absolutely excellent, thank you so much! I never would have found that :) So, the scale transition doesn't work without setting a display, however my "project-tile" doesn't have a display set, though it works - does that one function as it's within a flex container or something different? Thanks again :)

– James Hooper
Nov 13 '18 at 13:11

because it's an a tag it's default display is inline therefore it ignores any transforms where as your project tiles are in a div and so display by default as a block element. Glad it worked for you!

– Aaron McGuire
Nov 13 '18 at 13:14

Awesome, that really clears it up :) Thanks a lot! :)

– James Hooper
Nov 13 '18 at 15:13

add a comment |

Oh actually, I wasn't so clear on where I have a problem, sorry! The problem is the yellow button at the bottom of the page which says "More Projects". I've made two to show the two options I can make, and I want the button to transition the same way that it does when you hover over the thumbnail/project-tiles. The problem is that I can only make the transition take place if I put the code in the anchor link, but then the yellow area isn't clickable, only the anchor text is.

– James Hooper
Nov 13 '18 at 12:39

Ah in that case your anchor tag #pro-link-text ( the second button that currently doesn't move, you need to add display: inline-block; & an initial transform scale state e.g. transform:scale(1); the scale transition wont work without setting a display property.

– Aaron McGuire
Nov 13 '18 at 12:45

That's absolutely excellent, thank you so much! I never would have found that :) So, the scale transition doesn't work without setting a display, however my "project-tile" doesn't have a display set, though it works - does that one function as it's within a flex container or something different? Thanks again :)

– James Hooper
Nov 13 '18 at 13:11

because it's an a tag it's default display is inline therefore it ignores any transforms where as your project tiles are in a div and so display by default as a block element. Glad it worked for you!

– Aaron McGuire
Nov 13 '18 at 13:14

Awesome, that really clears it up :) Thanks a lot! :)

– James Hooper
Nov 13 '18 at 15:13

Oh actually, I wasn't so clear on where I have a problem, sorry! The problem is the yellow button at the bottom of the page which says "More Projects". I've made two to show the two options I can make, and I want the button to transition the same way that it does when you hover over the thumbnail/project-tiles. The problem is that I can only make the transition take place if I put the code in the anchor link, but then the yellow area isn't clickable, only the anchor text is.

– James Hooper
Nov 13 '18 at 12:39

Ah in that case your anchor tag #pro-link-text ( the second button that currently doesn't move, you need to add display: inline-block; & an initial transform scale state e.g. transform:scale(1); the scale transition wont work without setting a display property.

– Aaron McGuire
Nov 13 '18 at 12:45

That's absolutely excellent, thank you so much! I never would have found that :) So, the scale transition doesn't work without setting a display, however my "project-tile" doesn't have a display set, though it works - does that one function as it's within a flex container or something different? Thanks again :)

– James Hooper
Nov 13 '18 at 13:11

because it's an a tag it's default display is inline therefore it ignores any transforms where as your project tiles are in a div and so display by default as a block element. Glad it worked for you!

– Aaron McGuire
Nov 13 '18 at 13:14

Awesome, that really clears it up :) Thanks a lot! :)

– James Hooper
Nov 13 '18 at 15:13

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Myujth