CODEWITHSUNDEEP
htmlcssinternet-explorer
user3982778
user3982778

Reputation: 37

Outline Offset substitute on IE

I have something like this "http://jsfiddle.net/sogpgepg/" that works on Chrome and on Firefox. However I noticed the offset doesn't work on Internet Explorer and the outline is outside the picture and not inside it.

After some research I found out that Explorer doesn't support outline-offset!

Is there any way I can get the same effect (inside border) on Internet Explorer?

Script:

HTML

<div id="container">
<div class="inner">
    <img src="http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg"/>
    </div>
</div>

CSS

#container{
    width: 300px;
    height: auto;
    margin: 0;
    padding: 0;
}

    .inner img{
            width: 100%;

            outline: 6px solid RGBa(255,0,0, 0.5);
            outline-offset: -6px;

            -webkit-transition: all 0.5s ease-in;
            -moz-transition: all 0.5s ease-in;
            -o-transition: all 0.5s ease-in;
            transition: all 0.5s ease-in;
        }

        .inner img:hover {
            outline: 6px solid rgba(200,200,200,0);

            -webkit-transition: all 0.5s ease-in;
            -moz-transition: all 0.5s ease-in;
            -o-transition: all 0.5s ease-in;
            transition: all 0.5s ease-in;
        }

Upvotes: 3

Views: 6836

Answers (2)

Josiah
Josiah

Reputation: 3158

One possible work around is to use an inset shadow.

I modified your fiddle somewhat.

http://jsfiddle.net/sogpgepg/1/

The changes I made are:

  1. Make the <img> a background-image on .inner.
  2. Move all styles from .inner img up to .inner

By setting the blur radius to 0 and specifying the spread radius, you can get a hard-edge 'border'.

This link includes more information on using shadows (particularly inset shadows): http://designshack.net/articles/css/inner-shadows-in-css-images-text-and-beyond/

Code:

#container {
    width: 300px;
    height: auto;
    margin: 0;
    padding: 0;
}

.inner{
    width: 300px;
    height:200px;
    background-image:url('http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg');
    box-shadow:inset 0px 0px 0px 6px rgba(255,0,0,0.5);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

.inner:hover {
    box-shadow: inset 0px 0px 0px 6px rgba(200,200,200,0);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

Upvotes: 2

UID
UID

Reputation: 4514

Here is an alternate for IE as shown in "http://css-tricks.com/"

Code:

<div class="inner-border">
    Transparent Inside Border
</div>

CSS

.inner-border {
    background: #000;
    color: #fff;
    margin: 50px;
    padding: 15px;
    position: relative;
}
.inner-border:before {
    border: 5px solid #000;
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
}

JSFiddle Demo of the Above Code

Here is another example of Transparent Inside Border: http://jsfiddle.net/chriscoyier/DvaqK/4/

Hope this will help!

Upvotes: 2

Related Questions