Photoshop Question posted in
The official user guide can be found here.

Using CSS to create a word portion lift – Photoshop

I am trying to create a specific effect for a logo, but I dont really have an idea how this is going to work.

Here is a sketch I did in photoshop:

http://s28.postimg.org/nrb3k6grh/effect.gif

So my idea is – I have 2 divs on top of one another, one containing a graphic and under it, one containing a word. So I want to make the top div dissapear on hover and when the bottom one is shown I want to lift the “ord” part of “word” (for example) up a bit using a or something.. How can I achieve this?

I am not sure about the two divs part though. If there is a better way of doing this, please share.

Thanks!

Tags:

3

Answers


  1. 0

    Check if this works for you

    HTML

     <a href="" class="logo">
    W<span class="text">ord</span>
  <span class="overlay"></span>
</a>

    CSS

     .logo {
  color: red;
  font-size: 60px;
  font-family: arial;
  text-transform: uppercase;
  height: 200px;
  width: 200px;
  text-decoration: none;
  line-height: 200px;
  display: block;
  position: relative;
}
.overlay {
  -moz-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  position: absolute;
  left: 0;
  top: 0;
  height: 200px;
  width: 200px;
  background: red;
  opacity: 1;

}
.logo:hover .overlay {
  opacity: 0
}
.logo:hover {
  background: none
}
.logo .text {
  position: relative;
  top: 0;
  -moz-transition: top 0.5s 0.5s;
  -webkit-transition: top 0.5s 0.5s;
  transition: top 0.5s 0.5s;
}
.logo:hover .text {
  top: -30px;
}
    Login or Signup to reply.
  2. 0

    I’ve used two div in this Demo. Have a look at the DEMO.

    CSS Code is 

    .main{position:relative;}
.logo{
background:url("http://placehold.it/100x100") no-repeat; 
width:100px;
height:100px;
position:absolute;
left:0;
top:0;
  z-index:-1;
}
.text{
color:Blue; font-size:5vh; 
position:absolute;
left:0;
top:0;
z-index:1;}

.logo:hover{ 
visibility:hidden;
opacity:0; 
transition:visibility 0.5s linear 0.5s, opacity 0.5s linear;
}

div.main:hover .text span{display:inline-block;color:red;
transform: translate(0,-10px); transition: all 0.5s ease-in-out;
}

    HTML Code is 

    <div class="main">
  <div class="logo"><!-- To make SEO compactable Logo Text can be type here --></div>
  <div class="text">L<span>ogo</span></div>
</div>
    Login or Signup to reply.
  3. 0

    Using CSS to create a word portion lift

    Using these code lines you can use lift function on anywhere you want to use in your HTML

    .card-lift--hover:hover /*card lift effect*/
{
    transition: all .15s ease;
    transform: translateY(-20px);
}
    <div class="testimonial card-lift--hover">
  <h2>Hello World</h2>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search