:Hover transition on an anchor










1















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 :)






html css hover anchor transition







share|improve this question




























    1















    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 :)






    html css hover anchor transition







    share|improve this question


























      1












      1








      1








      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 :)






      html css hover anchor transition







      share|improve this question
















      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 :)






      /* 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




      html css hover anchor transition






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 13 '18 at 13:53









      Smollet777

      1,3591015




      1,3591015










      asked Nov 13 '18 at 12:26









      James HooperJames Hooper

      84




      84






















          1 Answer
          1






          active

          oldest

          votes


















          1














          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>








          share|improve this answer

























          • 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










          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















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          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>








          share|improve this answer

























          • 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















          1














          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>








          share|improve this answer

























          • 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













          1












          1








          1







          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>








          share|improve this answer















          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>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 13 '18 at 12:49

























          answered Nov 13 '18 at 12:34









          Aaron McGuireAaron McGuire

          4328




          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

















          • 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





          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






          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





          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





          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





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

          – James Hooper
          Nov 13 '18 at 15:13

















          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














          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















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          -

          Popular posts from this blog

          Top Tejano songwriter Luis Silva dead of heart attack at 64

          Image
          Ramiro Burr's New Blog - to go back: www.ramiroburr.com From Latin rock to reggaeton, boleros to blues,Tex-Mex to Tejano, conjunto to corridos and beyond, Ramiro Burr has it covered. If you have a new CD release, a trivia question or are looking for tour info, post a message here or e-mail Ramiro directly at: musicreporter@gmail.com Top Tejano songwriter Luis Silva dead of heart attack at 64 By Ramiro Burr on October 23, 2008 8:40 AM | Permalink | Comments (12) | TrackBacks (0) UPDATE: Luis Silva Funeral Service details released Visitation 4-9 p.m. Saturday, Rosary service 6 p.m. Saturday at Porter Loring, 1101 McCullough Ave Funeral Service 10:30 a.m. Monday St. Anthony De Padua Catholic Church, Burial Service at Chapel Hills, 7735 Gibbs Sprawl Road. Porter Loring (210) 227-8221 Related New Flash: Irma Laura Lopez: long time record promoter killed in accident NewsFlash: 9:02 a.m. (New comments below) Luis Silva , one of the most well-known ...
          Read more

          政党

          Image
          政治主題的一部分 政党政治 政治光譜 左派 極左 中間偏左 中间派 中間偏左 激進中間 （ 英语 ： Radical centrism ） 中間偏右 右派 中間偏右 極右 政綱 極端 激进 （ 英语 ： Political radicalism ） 温和 （ 英语 ： Moderate ） 改良 混合 （ 英语 ： Syncretic politics ） 第三位置 保守 原教旨 反动 政党制度 无党制 （ 英语 ： Non-partisan democracy ） 一党制 一党优...
          Read more

          天津地下鉄3号線

          Image
          天津地下鉄3号線 3号線の電車 基本情報 通称 ？ 現況 営業中 国 中華人民共和国・ 中国 所在地 西青区・河西区・和平区・河北区・北辰区 路線網 天津地下鉄 起点 南駅 終点 小淀駅 駅数 26駅 路線番号 3 路線色 ■ 水色 開業 2012年10月1日 路線諸元 路線距離 34 km 営業キロ ？ 軌間 1,435 mm (標準軌) 線路数 複線 電化...
          Read more