Allgemeines » Button + Schrift vor Hintergrund

28.06.2018 14:47 (zuletzt bearbeitet: 28.06.2018 14:58)

Focuswelten
#1

Fo

Hallo!

Ich bin auf diese Jimdoseite gestoßen: https://www.pepperprint-loops.com/

Ich selbst habe die Jimdoseite www.focuswelten-livereportagen.de (Rome-Design) und möchte gerne so wie im obigen Beispiel zu sehen einen Button mitten vor dem vollformatigen Hintergrundbild einfügen.

Wie macht man so etwas? Ich will damit nach weiter unten zum Content springen, wenn jemand darauf klickt.

Danke für jede Hilfe!

Beppo

Antworten

Beitrag melden

#2

04.07.2018 08:13 (zuletzt bearbeitet: 04.07.2018 08:21)

az_
#2

az_

Dieses sog. Image-Overlay habe ich mit jQuery und CSS realisiert. Anderes Beispiel: https://designtest-hamburg.jimdo.com

...das CSS dazu ist wie folgt:

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
 

/* images abdunkeln (Startseite, Akkordeon)
--------------------------------------------------------------------------------------------*/
 
.image:after,
.image:before {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transform: scale(0.95);
    transform-origin: center center;
}
 
.image:after {
    content: '\A';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background:rgba(0,0,0,0.33);*/
    background: rgba(55, 55, 55, 0.5);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,fefcea+100&0.8+0,0+99 */
    background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 0%, rgba(251, 249, 232, 0) 99%, rgba(254, 252, 234, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 0%, rgba(251, 249, 232, 0) 99%, rgba(254, 252, 234, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(251, 249, 232, 0) 99%, rgba(254, 252, 234, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00fefcea', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    border-radius: 3px;
    transform: scale(0.95);
    transform-origin: center center;
}
 
.image:hover:after,
.image:hover:before {
    opacity: 1;
}
 
.image:before {
    content: attr(data-content);
    font-size: 48px;
    width: 100%;
    color: #fff;
    z-index: 1;
    top: calc(50% - 48px);
    padding: 0;
    text-align: center;
    background: transparent;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    transform: scale(0.95);
    transform-origin: center center;
}
 
 

...das jQuery-Skript:

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
//<![CDATA[
      $(document).ready(function () {
          $("#cc-m-13040092636 .cc-imagewrapper a", #cc-m-12698245836 .cc-imagewrapper a").addClass( "image" );
          
          //add data content
          $('#cc-m-13040092636 .cc-imagewrapper a').attr('data-content', 'Text added on hover');
          $('#cc-m-12698245836 .cc-imagewrapper a').attr('data-content', '2nd Text added on hover');
      });
//]]>
</script>
 

LG, az

Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!

...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html