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 Daniele Manca
Daniele Manca
10,986 Points

Button entering block on hover issue

Hi folks,

I have a button who enters into a block as the users hovers over the top of the large images before the Get in touch section on the below page:

http://bypasswebdevelopment.com/hughes/services.html

I have 2 issues though:

1) I cannot get the button precisely centered 2) the transition for some reason is not smooth

If you anyone has any suggestions on how to perfect this please let me know.

1 Answer

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

This is one way you could do it. Your buttons are set to position absolute which is taking them out of the content flow. removing that absolute positioning will put it back into the centered position underneath the title. then you would set the title to be top: 58%. View below

.services-showcase .showcase-item .details {
    position: absolute;
    text-align: center;
    top: 58%; /*OFFSETS THE BUTTON AND PLACED TITLE IN CENTER*/
    left: 50%;
    z-index: 2;
    transform: translateX(-50%) translateY(-50%);
}

.services-showcase .showcase-item .details .btn {
    opacity: 0;
    /* position: absolute; */
    /* left: 0; */
    /* right: 0; */
    margin: 0 auto;
    transition: opacity .5s ease-in-out;
}

I hope this helps.