html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: 'liga';
}.addClass('animated bounce');" не сработает но можете попробовать $('.Growl-notification').addClass('animated bounce');@media (max-width: 1024px) and (min-width: 768px) мы попросту перебираем отрезок величины по которому будет работать правило, к примеру использование параметра "only screen" не обязательно указывать, в большинстве случаев это бутафория которая по сути не нужна, достаточно указать"@media (max-$parm: $parm)", с Ярослав Иванов я полностью согласен данной конструкции в современном вебе более чем достаточно, все более конкретные заморочки с условиями нужны использовать только для определенных задач, интересует более подробней читайздесь. Мой друг если ты в своих сборках используешь процессоры или препроцессоры по типу scss или less или postcss, тогда рекомендую к просмотру я сам часто использую от проекта к проекту: Здесь Здесь
.main-content {
display:flex;
justify-content: center;
flex-flow: row wrap
}
.title-image{
position: relative;
display: inherit;
flex-flow: column;
margin: 10px;
max-width: 32%;
transition: all .6s;
}
.title-image:hover > h2{
opacity:0;
}
.title-image > h2 {
position: absolute;
top: 0;
width: 100%;
max-width:100%;
margin: 0;
background-color: rgba(225,225,255, .5);
transition: all .6s;
text-align: center;
word-wrap: break-word;
word-break: normal;
}.title-image::hover{
. title { display: none; или visibility: hidden; или opacity: 0;}
}<style>
.main-content {
display:flex;
flex-flow: row wrap;
margin: 10px;
}
.title-image{
position: relative;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #ccc;
margin: 10px;
width:300px;
}
.image {
display:block;
}
.title {
position: absolute;
z-index:1;
width:100%;
background:rgba(256,256,256,.5);
margin: auto;
text-align:center;
padding: 10px;
max-width: inherit;
}
</style>
<div class="main-content">
<div class="title-image">
<h2 class="title">Заголовок</h2>
<img class="image" src="http://www.tvovermind.com/wp-content/uploads/2017/11/alexis-ren-images-91257160-768x432.jpg" alt="" width="100%" height="auto">
</div>
<div class="title-image">
<h2 class="title">Заголовок</h2>
<img class="image" src="http://www.tvovermind.com/wp-content/uploads/2017/11/alexis-ren-images-91257160-768x432.jpg" alt="" width="100%" height="auto">
</div>
<div class="title-image">
<h2 class="title">Заголовок</h2>
<img class="image" src="http://www.tvovermind.com/wp-content/uploads/2017/11/alexis-ren-images-91257160-768x432.jpg" alt="" width="100%" height="auto">
</div>
<div class="title-image">
<h2 class="title">Заголовок</h2>
<img class="image" src="http://www.tvovermind.com/wp-content/uploads/2017/11/alexis-ren-images-91257160-768x432.jpg" alt="" width="100%" height="auto">
</div>
</div>