Bilder Cover

CSS Bilder auf div background url umstellen

git-svn-id: http://78.47.251.156/svn/dev/sterntours-3@3312 f459cee4-fb09-11de-96c3-f9c5f16c3c76
This commit is contained in:
adametz 2017-03-07 19:04:05 +00:00
parent 02e576ebc7
commit 7e5ee4397f
3 changed files with 20 additions and 6 deletions

View file

@ -8,4 +8,5 @@
{% set image_url = '/bundles/app/images/no-picture.png' %}
{% set image_alt = 'Kein Vorschaubild vorhanden' %}
{% endif %}
<img src="{{ image_url }}" alt="{{ image_alt }}">
<div alt="{{ image_alt }}" style="background:url({{ image_url }}) no-repeat"></div>

View file

@ -167,16 +167,17 @@
}
.travel-wrapper .item:hover .item-img {
img {
div {
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
}
.travel-wrapper .item .item-img {
img {
div {
width: 100%;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
@ -187,6 +188,12 @@
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
background: url(/images/welcome.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 160px;
&.lower-height {
width: auto;
min-height: 190px;

View file

@ -747,14 +747,14 @@ a[id^="video_"]:before,
.travel-wrapper h5 {
font-weight: 700;
}
.travel-wrapper .item:hover .item-img img {
.travel-wrapper .item:hover .item-img div {
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.travel-wrapper .item .item-img img {
.travel-wrapper .item .item-img div {
width: 100%;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
@ -765,8 +765,14 @@ a[id^="video_"]:before,
-o-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
background: url(/images/welcome.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 160px;
}
.travel-wrapper .item .item-img img.lower-height {
.travel-wrapper .item .item-img div.lower-height {
width: auto;
min-height: 190px;
}