Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 22, 2016 at 9:40 am #636332
    jambrikp

    Hi,

    I use icon like an image caption, this is the code:
    <span class="special-overlay-icon-1"></span><span class="special-overlay-icon-1-text">Kutyaeledel</span>

    .special-overlay-icon-1 {
    content: url("http://petcorner.hu/wp-content/uploads/sites/7/kutyaeledel-icon-piros.png");
    opacity: 1;
    vertical-align: middle;
    text-align: center;
    margin-top: 0px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
    .special-overlay-icon-1-text {
    left: 38.5%;
}
.special-overlay-icon-1-text, .special-overlay-icon-2-text, .special-overlay-icon-3-text {
    position: absolute;
    top: 100%;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    I just put this code to the caption field and style.css. It work good in Chrome but I don’t see the icon in Firefox.
    Please check my live preview with Chrome and with Firefox too.

    Could you help me what is the problem?

    Best regards,
    Peter

    May 23, 2016 at 9:45 am #636640
    Josue

    Hey Peter,

    Try changing your code to this:

    .special-overlay-icon-1:before{
	content: "";
	width: 120px;
	height: 120px;
	display: block;
	margin: 0 auto;
	background:url("http://petcorner.hu/wp-content/uploads/sites/7/kutyaeledel-icon-piros.png") no-repeat top center;
	background-size: contain;
	opacity: 1;
	vertical-align: middle;
    text-align: center;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    Best regards,
    Josue

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.