CODEWITHSUNDEEP
htmlcss
C. Felipe
C. Felipe

Reputation: 469

CSS Transition and div inside another div behaves crazy

I have two problems with my portfolio section which is not as smooth as I want it to be. Here they are:

  1. I wanted my projects to change background-color and show a small plus sign when hovering over them. In the same time I wanted to add a "transition: all 0.5s ease-in-out;" but the result is not what I expected. It probbaly happens because my "plus sign" should be located in another div but I didn't know how to make it work. Instead I put it here:

    .projectshot a .over:hover{
    position: absolute;
    background: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png) center center no-repeat rgba(51, 51, 51, 0.6);
    border-radius: 8px;
    height: 150px;
    width: 200px;
    margin: 10px;
}

    This is the effect I wanted to achieve: http://bjorsberg.se/

  2. The second problem that bothers me is that, if you look really carefully, when you approach each of the projects with the mouse the mouse pointer starts to "dance" and it behaves crazy??? How can I fix that???

Here is my JSFiddle:

http://jsfiddle.net/8fCMA/2/

.plus{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -49px 0 0 -56px;
    background: url(img/plus.png) center center no-repeat;
}

I am quite new to web design (4 months since I started learning) and I am clearly not good with positioning div's inside div inside another div... So, please feel free to correct my fiddle if you see any trouble I created. Thanks!

Upvotes: 2

Views: 2259

Answers (2)

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

I've just made some small changes including:

  • Moving the hover to the .projectshot box.
  • Moving background-position and background-repeat to the non hover definition.
  • Adding the transitions.

It works for now but you can still remove a lot of code. Even the html can be heavily reduced. I suggest you to have a look at that too (DEMO).

.projectshot{
    position: relative;
    padding: 10px;
    height: 150px;
    margin-bottom: 30px;
    display: inline-block;
}

.projectshot img{
    height: 150px;
    width: 200px;
    border-radius: 8px;
    -webkit-box-shadow: 0 9px 13px rgba(0,0,0,.14);
    -moz-box-shadow: 0 9px 13px rgba(0,0,0,.14);
    box-shadow: 0 9px 13px rgba(0,0,0,.14);
}

.projectshot:hover .over{
    background-image: url(http://www.iconsea.com/uploadimage/smallsort/4015/4dxtdhpaxqw.png);
    background-color: rgba(51, 51, 51, 0.6);
    transition: all 0.5s ease-in-out;
}

.projectshot:hover {
    cursor: pointer;
}

.over{
    position: absolute;
    border-radius: 8px;
    height: 150px;
    width: 200px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 0.5s ease-in-out;
}

.inner{
    background: rgba(113,122,137,.85);
    border-radius: 8px;
    width: 100%;
    height: 100%;
    display: none;
}

.plus{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -49px 0 0 -56px;
    background: url(img/plus.png) center center no-repeat;
}

Upvotes: 1

Dziad Borowy
Dziad Borowy

Reputation: 12579

I would simplify the html structure if I were you, as it is not necessary.

e.g.: projectshot can look like this:

<div class="projectshot">
    <a href="http://www.yahoo.com" target="_blank">
        <img alt="Sushi" src="...">
    </a>
</div>

and you can add the "cover" as :before pseudoelement. Then - in css all you need to do is to add this to the "cover" element:

opacity: 0;
transition: opacity .2s;

and - on hover - change the opacity to 1:

opacity: 1;

here's the updated demo (I've removed a lot of your html/css code just for demo purposes)

Upvotes: 1

Related Questions