CSS Переход и div внутри другого div ведет себя сумасшедшим

Question

У меня есть две проблемы с моей частью портфолио, которая не такая гладкая, как я хочу. Вот они:

1. Я хотел, чтобы мои проекты меняли цвет фона и показывали небольшой знак плюса, паря над ними. В то же время я хотел добавить «переход: все 0.5 с легкость в игре»; но результат не тот, который я ожидал. Это случается, потому что мой знак «плюс» должен быть расположен в другом div, но я не знал, как заставить его работать. Вместо этого я положил его здесь:

   .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; 
   } 
   

   Это эффект, который я хотел достигнуть: http://bjorsberg.se/

2. Вторая проблема, которая меня беспокоит то, что, если вы посмотрите действительно внимательно, когда вы приближаетесь к каждому из проектов с помощью мыши указатель мыши начинает «танцевать», и он ведет себя безумно ??? Как я могу это исправить?

Вот мой 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; 
} 

Я совершенно новой для веб-дизайна (4 месяца, так как я начал обучение), и я явно не хорошо с позиционированием DIV внутри DIV внутри другого div ... Итак, не стесняйтесь исправить мою скрипку, если увидите какие-то проблемы, которые я создал. Благодаря!

Answer 1

Я бы упростил структуру html, если бы я был вами, поскольку это не обязательно.

.: projectshot например, может выглядеть так:

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

и вы можете добавить "крышку", как :before pseudoelement. Тогда - в CSS все, что вам нужно сделать, это добавить к этому элементу «обложки»:

opacity: 0; 
transition: opacity .2s; 

и - при наведении курсора мыши - изменить непрозрачность до 1:

opacity: 1; 

вот updated demo (я удалил много вашего HTML кода/CSS только для демонстрационных целей)

Answer 2

Я только что сделал некоторые небольшие изменения в том числе:

• Перемещение наведите курсор на поле .projectshot.
• Перемещение background-position и background-repeat на определение 0% .
• Добавление переходов.

Это работает пока, но вы все еще можете удалить много кода. Даже html может быть сильно уменьшен. Я предлагаю вам также взглянуть на это (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; 
}