Codigo css no funcionan en firefox y safari
Publicado por exequiel (1 intervención) el 06/02/2017 02:55:19
Hola buenasss...!!
Eh creado un after con un background de fondo, ese after aparece cuando pasamos el cursor sobre cada una de las imagenes. En naviegadores como el chrome, opera e internet explorer edge funciona de diez pero en el safari o firefox no. El problema central es que la imagen aparece pero no esta centrada. Les mando una imagen del problema.
Les agradecería si pueden ayudarme...!!
Slds....!!
Este es una parte del código html.
Parte del codigo CSS
Eh creado un after con un background de fondo, ese after aparece cuando pasamos el cursor sobre cada una de las imagenes. En naviegadores como el chrome, opera e internet explorer edge funciona de diez pero en el safari o firefox no. El problema central es que la imagen aparece pero no esta centrada. Les mando una imagen del problema.
Les agradecería si pueden ayudarme...!!
Slds....!!
Este es una parte del código html.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<main class="main">
<div class="services">
<div class="service-imagenes seguridad">
<h3 class="service-imagenes__title ">Sistema de Seguridad</h3>
</div>
<div class="service-imagenes paginas">
<h3 class="service-imagenes__title ">Diseño de Paginas Web</h3>
</div>
<div class="service-imagenes computacion">
<h3 class="service-imagenes__title ">Técnicos Computacionales</h3>
</div>
<div class="service-imagenes telefonico">
<h3 class="service-imagenes__title ">Técnicos Telefónicos</h3>
</div>
</div>
Parte del codigo CSS
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
85
86
.services {
background: #ffffff;
margin-top: .5em;
margin-bottom: 8em;
width: 100%;
height: 100%; }
@media screen and (min-width: 768px) {
.services {
display: -ms-flexbox;
display: flex;-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-top: 3em; } }
@media screen and (min-width: 1201px) {
.services {
margin-left: -1em; } }
@media screen and (min-width: 1300px) {
.services {
margin: auto; } }
.service-imagenes {
top: 1em;border-radius: 50%;
position: relative; height: 280px; width: 311px; margin: auto;display: -ms-flexbox;
display: flex;-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
color: #ffffff;
margin-bottom: 1em;
font-size: .8em;
cursor: pointer; }
.service-imagenes__title {
margin-top: -9em; }
@media screen and (min-width: 933px) {
.service-imagenes {
margin-left: 7em; } }
@media screen and (min-width: 1201px) {
.service-imagenes {
margin-left: 14em; } }
@media screen and (min-width: 1300px) {
.service-imagenes {
margin: auto; } }
.service-imagenes:nth-of-type(1):after {
background: url("img-seg.png") center center no-repeat; }
.service-imagenes:nth-of-type(2):after {
background: url("img-diseño.png") center center no-repeat; }
.service-imagenes:nth-of-type(3):after {
background: url("img-compu.png") center center no-repeat; }
.service-imagenes:nth-of-type(4):after {
background: url("img-tel.png") center center no-repeat; }
.seguridad {
background: url("sistemaseg.png") no-repeat center steelblue; }
.paginas {
background: url("diseñoweb.png") no-repeat center #E42D40;
color: #ffffff; }
.computacion {
background: url("tecnicopc.png") no-repeat center steelblue; }
.telefonico {
background: url("tecnicotel.png") no-repeat center #E42D40;
color: #ffffff; }
.service-imagenes:hover:after {
opacity: 1;transform: scale(1);
border: 1px solid black; }
.service-imagenes:after {
content: "";
position: absolute; overflow: hidden;border-radius: 50%;
width: 100%;
height: 100%;
transition: all 1s;transform: scale(0);
opacity: 0; }
Valora esta pregunta
0
