CODEWITHSUNDEEP
htmlcsscss-transitionstranslate-animation
DJ22T
DJ22T

Reputation: 1640

Translate with CSS to the top of a div

I have 3 boxes within a fluid container.

Each box has a heading title, an icon and some text below.

On :hover I want the icon to move to the top of the <div> and change it's size, I have managed to "achieve" it but using certain number of pixels.

That will not work in mobile resolutions if the title text is longer and takes 2 lines.

Here is what I have done so far:

Fiddle here

HTML

<div class="container">
<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollIn">
        <div class="service-box">
            <h2>Title</h2>
            <i class="fa fa-5x fa-paper-plane wow bounceIn market-icon" data-wow-delay=".1s"></i>
            <p class="">Certain text below the icon</p>
        </div>
    </div>
</div>

CSS

.container{
    text-align:center;
}

.market-blocks{
    background: #3aa0d1;
    padding: 30px 0 30px 0;
    cursor:pointer;
}

.orange{
  background: #e97d68;
}

i.market-icon { 
   -webkit-transition: 1s ease-in;
    -moz-transition: 1s ease-in;
    -o-transition: 1s ease-in;
    transition: 1s ease-in
}

.market-blocks:hover i.market-icon {
    -webkit-transform: translate(0,-70px);
    -moz-transform: translate(0,-70px);
    -o-transform: translate(0,-70px);
    -ms-transform: translate(0,-70px);
    transform: translate(0,-70px);
    font-size: 1.8em;
}

How can I do it? And also is there a better way to do the movement from the initial position to the top of the <div>?

Upvotes: 3

Views: 6626

Answers (1)

sergdenisov
sergdenisov

Reputation: 8572

Pure HTML/CSS solution:

.container {
    text-align: center;
}

.market-blocks {
	background: #3aa0d1;
	padding: 30px 0;
	cursor: pointer;
}

.orange {
    background: #e97d68;
}

.service-box {
    display: inline-block;
}

.service-box-header {
    position: relative;
}

.market-title {
    padding-bottom: 5em;
    -webkit-transition: 1s ease-in;
    transition: 1s ease-in
}

.market-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transition: 1s ease-in;
    transition: 1s ease-in
}

    .market-blocks:hover .market-title {
        padding-bottom: 0;
    }

    .market-blocks:hover .market-icon {
        bottom: 100%;
        font-size: 1.8em;
    }
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 text-center market-blocks orange wow rollIn">
            <div class="service-box">
                <div class="service-box-header">
                    <h2 class="market-title">Very-very-very-very-very-very-very-very loooooooooooooooooooong title</h2>
                    <i class="fa fa-5x fa-paper-plane wow bounceIn market-icon"></i>
                </div>
                <p class="">Certain text below the icon</p>
            </div>
        </div>
    </div>
</div>

Upvotes: 4

Related Questions