Jimdo-Specials (Tools, Widgets, HTML und CSS)

Mouseover per CSS

02.08.2018 09:38

Comanila
#1

Hallo zusammen,

für unsere Neueröffnung 'bastel' ich unsere HP mit Jimdo. Ich möchte einen speziellen Mouseover-Effekt erzielen und zwar diesen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!-- Bottom to top-->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item square effect3 bottom_to_top"><a href="#">
        <div class="img"><img src="https://image.jimcdn.com/app/cms/image/transf/none/path/s8c8c45c76e6400d1/image/ic7bcfa787e815b78/version/1533146436/image.jpg 270w" alt="img"></div>
        <div class="info">
          <h3>Heading here</h3>
          <p>Description goes here</p>
        </div></a></div>
    <!-- end normal -->
 
  </div>
</div>
 

--> Quelle + Effekt

Ich bekomme es aber nicht hin. Ich habe das CSS auf Github gefunden. Aber egal was ich mache ich bekomme den Effekt einfach nicht hin. Ich habe das CSS schon auf meiner Seite eingebunden wie im Forum beschrieben (Beitrag) aber es klappt nicht :(

Es geht um folgende Seite: https://www.brautgefluester-moers.de/brautkleider/ und das bild mit der dekorativen Beschriftung: Heading here + Description goes here

Ich muss dazu sagen, dass ich absoluter CSS Neuling bin und ich freue mich über jede Hilfe die ich bekommen kann. Wahrscheinlich habe ich irgendeinen blöden Fehler gemacht, zB beim einfügen in den Head. Aktuell verweise ich da auf mein, auf der Seite gespeichertes Dokument:

1
 
<link rel="stylesheet" href="/app/download/9451798069/stylesheet.scss?t=1533194807" type="text/css" />

Ich hab es auch schon mit einem Dokument mit .css versucht :(

Lieben dank fürs Lesen

Antworten

Beitrag melden

02.08.2018 10:28 (zuletzt bearbeitet: 02.08.2018 10:33)

Charles
#2

Charles

Liegt daran, dass der Code HTML ist und nicht CSS.
Hier hast du beides HTML + CSS: https://codepen.io/ajc100/pen/QNPyWa

Kleiner Hinweis: benutz bitte einen anderen Font für den Fließtext, für Navigation und Buttons völlig Ok aber als Fließtext sehr anstrengend.

Man verändert keine Webseiten man verändert das Verhalten der Besucher auf der Webseite.
Analytics zeigt dir nicht den Grund, es zeigt dir das Ergebnis des Verhaltens der Benutzer.
Retail Is Detail.

Antworten

Beitrag melden

02.08.2018 10:49

Comanila
#3

Comanila

Hi du,
danke für die Antwort.
Aber das hier ist CSS, oder?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
// Shared
// -------------------------
.ih-item.square.effect3 {
    overflow: hidden;
    
    &.colored {
        .info {
            background: $overlay_colored_fallback;
        }
    }
 
    .img {
        @include transform( translateY(0) );
        @include transition(  all .35s ease-in-out );
    }
 
    .info {
        height: 65px;
        background: $overlay_dark_fallback;
        opacity: 0;
        @include transition(  all .35s ease-in-out );
 
        h3 {
            text-transform: uppercase;
            color: #fff;
            text-align: center;
            font-size: 17px;
            padding: 10px 10px 0 4px;
            margin: 4px 0 0 0;
        }
 
        p {
            font-style: italic;
            font-size: 12px;
            position: relative;
            color: #bbb;
            padding: 5px;
            text-align: center;
        }
    }
 
    a:hover {
        .info {
            visibility: visible;
            opacity: 1;
        }
    }
}
 
// -------------------------
.ih-item.square.effect3.bottom_to_top {
    .info {
        top: auto;
        @include transform( translateY(100%) );
    }
 
    a:hover {
        .img {
            @include transform( translateY(-50px) );
        }
 
        .info {
            @include transform( translateY(0) );
        }
    }
}
 
// -------------------------
.ih-item.square.effect3.top_to_bottom {
    .info {
        bottom: auto;
        @include transform( translateY(-100%) );
    }
 
    a:hover {
        .img {
            @include transform( translateY(50px) );
        }
 
        .info {
            @include transform( translateY(0) );
        }
    }
}
 

Die Font für den Fließtext wird noch geändert. Finde es auch schwer zu lesen, danke für den Hinweis.

Ich wollte o.g. speichern um dann auf der Seite mit dem HTML zu arbeiten. Oder verstehe ich das komplett falsch? :(