Hover effects and revealing text

That's a cool approach!

Yup, I discovered it recently. It always seems more of a pain than it should be to vertically align.

I should give it a shot since I only used transform for animations.

Wow thanks so much Ede and mtch!

Ede, I'm just a bit unsure, but where is the h1 you're referring to? I understand how mtch's code works. But I'm just taking a minute to get my head around how to add yours to it. I've added your pen for box p to mtch's text p. It's aligned on the Y axis, but not on the X. Where should the text-align go?

Hi mtch,

Thanks for the great example! I'm just wondering, how would you position the text in the centre of an image? Something to do with relative and absolute positioning obviously?

Here you go, hopefuly it will do the trick.

http://codepen.io/mtch/pen/raGKry

Well done, mtch. :)

Thank you Guil Hernandez :)

Hi Ede,

The text is centred on the Y axis, but it's aligned to the left on the X. Here's my code:

<div class="image">
    <div class="text">
        <p>text</p>
    </div>
</div>

body {
  margin: 0 auto;
  width: 500px;
}

.image {
    width: 150px;
    height: 150px;
    background: tomato;
    position: relative;
}

.text {
    width: 150px;
    height: 150px;
    background: deepskyblue;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.text p {
    width: 50px;
    height: 50px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    font-family: 'lato';
    text-align: center;
  position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0;
}

.text:hover {
    opacity: 1;
}

Hi Gabriel,

Hmm, I'll have a proper look at it in a bit and get back to you. You also have a bit of redundant code so I'll look at that too.

All the best,

Ede

Ok cool thanks. I'm curious, how long have you been learning code for?

Excuse me guys for the sudden changes in code, I have swapped the h1 with an p tag because h1 tags are supposed to be of consistent appearance throughout the web page.

For future reading on that please see https://github.com/CSSLint/csslint/wiki/Disallow-qualified-headings

Gabriel, how about removing the position: relative, transform and margin: 0; ? You will notice that with my absolute centering trick both the text div and the nested p tag are centered.

But if you would like to go on with Ede trick, remove the absolute positioning, the top/bottom etc. properties and remove the margin: 0; so the margin will be set to auto.

Your code should look like this:

.text p {
    width: 50px;
    height: 50px;
    font-family: 'lato';
    text-align: center;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: auto;
}

Hi Gabriel,

Looks like mtch got it to it before me, so hopefully that will sort it for you. Cheers mtch.

I've been learning code for about 2 years. I've found a really helpful thing is to get a practical application - volunteer to build a website for a charity, for example. The deadline, working to a brief and the 'live' context will speed you along no end and make you realise what needs to be learnt.

All the best,

Ede

Ede and mtch,

Thank you so much.

There's one final thing here I'm a little unsure about. And that's why the position is 'relative' for the 'text p', and not absolute. I would've thought it should be absolutely positioned just as the 'text.' Or is it set to relative because 'text' has an 'absolute'?

Ede, thanks for the advice. I've only been coding since early November, so not too long really. I totally understand what you're saying. I'm currently working on a website for an online magazine that I want to start with some friends, and a couple of friend's bands websites. I'm finding that just really getting my head around one thing a day helps and adds up over a week.

How many hours would you code a day? Sorry if this is heaps, I'm just really interested in everyone's process. If there's one thing I find hard to gauge, it's if I'm picking this stuff up at something of a 'normal' rate or not, and also what's a reasonable expectation of how much coding can get done in a day.

Cheers for any further discussion :)

Hi Gabriel,

Feel free to use my positioning method as it does not require any vendor prefixing. And yes, most of the time absolute positioned elements should be nested inside relative positioned parents, I had a look how it would be like with an absolute positioned element instead of relative, but it would require some tweeking to center it properly I am afraid.

Hi Gabriel,

No problem! Discussion is a good thing. And your magazine project sounds great. I myself was thinking about starting some sort of blog too. I'd love to see any works-in-progress or the final thing once it's out there :)

How many hours a day I spend coding? I spend quite a lot between designing, coding and learning. About 5 and upwards. I would resist the temptation to be hard on yourself about filling the 'correct quota of hours' though. As long as you are progressing and repeating bits that you have learnt so nothing is forgotten, it will just build up over time naturally, like you said.

All the best,

Ede