Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Erik Nuber
Erik Nuber
20,629 Points

Weird behavior of <a> tag and transition. Any suggestions?

Given the following code...

<div id="miscWork">
<article>
                    <a href="miscFiles/miscWorkPortfolio.html">
                        <header>
                            <div class="miscTitleStuff">
                                <h1>Header Here</h1>
                                <p>Small Info Here</p>
                            </div>
                        </header>
                        <div class="miscImage">
                            <img src="img..." alt="text...">
                            <div class="miscBox"></div>
                        </div>
                    </a>
                </article>
</div>

I used CSS to create a circle with a nice sized border. When you hover on the circle, the header portion of this transitions from being hidden outside of the circle to appearing within the bottom poriton.

That all works just great as I want.

However...If you click on the image within the circle, it opens properly in the new page. If you click on the text or the .miscBox class that I used for color it goes to the new page but the image doesn't appear.

I am not sure why as it is all wrapped within the <a> tag so should be working as far as I can tell.

Any suggestions would be appreciated.

Please note, I created the html in this way on purpose. I needed the .miscBox div to hide within the image so that only a rounded out portion exists. I am certain I could move the text in there as well but, I wanted to separate the header section from the image section for a nicer flow and easier to read file.

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

We might need to see more code to replicate this issue. The CSS for sure, and the HTML for the "new page".

If you are using workspaces, make a snapshot of your workspace and post the link to it.

4 Answers

Eric Montzka
Eric Montzka
4,094 Points
Eric Montzka
Eric Montzka
4,094 Points

It's hard to tell without the css, but I would try adding "display: block;" to the anchor, possible width and or height to 100%.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Here is the CSS. It's long because of the media queries.

@media screen and (max-width: 379px) {

    .miscTitleStuff h1 {
        font-family: 'Catamaran', sans-serif;
        font-weight: 700;
        font-size: 20px;
        line-height: 20px;
        letter-spacing: 1.5px;
        margin-bottom: 7px;
        text-transform: uppercase;
        text-align: left;
        color: #484848;
    }

    .firstLetter, .miscTitleStuff h1::first-letter {
        font-size: 24px;
    }
}

@media screen and (min-width: 380px) and (max-width: 549px) {
    .miscTitleStuff h1 {
        font-family: 'Catamaran', sans-serif;
        font-weight: 700;
        font-size: 25px;
        line-height: 25px;
        margin-bottom: 7px;
        text-transform: uppercase;
        text-align: left;
        color: #484848;
    }

    .firstLetter, .miscTitleStuff h1::first-letter {
        font-size: 30px;
    }
}

@media screen and (max-width: 549px) {

    #miscWork {
        position: relative;
        float: left;
        width: 100%;
    }

    #miscWork article {
        position: relative;
        background: none;
        border-bottom: 2.0px dashed #751935;
        margin: 5px 0;
        padding: 10px 0 10px 3px;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    #miscWork article header {
        position: absolute;
        left: 45%;
        top: 25%;
        width: 55%;
        height: auto;
    }

    .miscTitleStuff {
        position: relative;
        top: 0;
        left: 0;
        text-align: left;
        width: 100%;
        height: auto;
    }


    .miscTitleStuff p {
        font-family: 'Catamaran', sans-serif;
        font-size: 16px;
        line-height: 16px;
        font-style: italic; 
        color: #707070; 
    }

    .miscTitleStuff h1:hover {
        color: #4a96ad; 
    }

    .miscImage {
        border-radius: 50%;
        border: 7px solid #b9b9b9;
        background: #fff;
        display: inline-block;
        position: relative;
        top: 0;
        left: 0;
        width: 40%;
        height: auto;
        padding: 0;
        -webkit-filter: grayscale(100%);
        transition: all .15s ease-in;
    }

    .miscImage img {
        padding: 0;
        display: block;
        border-radius: 50%;
        box-sizing: border-box;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
    }


    .miscImage:hover {
        -webkit-filter: grayscale(0%);
        border-color: #751935;
    }
}

@media screen and (min-width: 550px) {

    #miscWork {
        position: relative;
        margin: 0 auto;
        width: 600px;
    }

    #miscWork article {
        position: relative;
        background: none;
        float: left;
        margin: 20px 10px;
        width: 280px;
        height: 280px;
        overflow: hidden;
    }

    .miscTitleStuff {
        position: absolute;
        top: -15px;
        left: -11px;
        text-align: center;
        width: 100%;
        height: auto;
    }

    .miscTitleStuff h1 {
        font-family: 'Catamaran', sans-serif;
        font-weight: 700;
        font-size: 15px;
        line-height: 15px;
        letter-spacing: .5px;
        margin-bottom: -3px;
        padding-top: 15px;
        text-transform: uppercase;
        color: #F5F3EE;
    }

    .firstLetter, .miscTitleStuff h1::first-letter {
        font-size: 19px;
    }

    .miscTitleStuff p {
        font-family: 'Catamaran', sans-serif;
        font-size: 14px;
        line-height: 14px;
        font-style: italic; 
        color: #F5F3EE; 
    }

    .miscImage {
        border-radius: 50%;
        border: 11px solid #b9b9b9;
        background: #fff;
        display: inline-block;
        position: relative;
        width: 275px;
        height: 275px;
        -webkit-filter: grayscale(100%);
        transition: all .15s ease-in;
        overflow: hidden;
    }

    .miscBox {
        position: absolute;
        top: 185px;
        left: 0px;
        width: 280px;
        height: 85px;
        background: #282828;
        opacity: .8;
        transform: translateY(100%);
        transition: transform .6s ease-out;
    }

    .miscImage:hover .miscBox {
        transform: translateY(0);
    }

    .miscImage img {
        padding: 0;
        display: block;
        border-radius: 50%;
        box-sizing: border-box;
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
    }


    .miscImage:hover {
        -webkit-filter: grayscale(0%);
        border-color: #751935;
    }
}

@media screen and (min-width: 880px) {

    #miscWork {
        position: relative;
        margin: 0 auto;
        width: 940px;
    }

}
Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

I think it is within the JS files. I have commented out sections, and think I know where it is coming from. Just not sure why it is happening. Will have to figure out how to fix it.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Thought I had it fixed and it was still causing errors. Went back and just made it so you can't click on the title to bring up the new page. Used a event.preventDefault within JS. This way if in the future things are changed the <a> tag is still around everything.