CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dr.Kameleon
Dr.Kameleon

Reputation: 22820

Display a small image at the top-right corner

OK, so basically this is what I want to do but - since I'm not such a wizard with CSS - I'll need some input...

How should I go about this? Any ideas?

Upvotes: 1

Views: 4607

Answers (3)

Mr_Green
Mr_Green

Reputation: 41842

You can use :after and :before pseudo selectors to the class which you are adding dynamically.

HTML

<div class="something dynamicallyAdded"></div>

CSS

.dynamicallyAdded {
    width: 300px;
    height: 400px;
    background-color: grey;
    position: relative;
}
.dynamicallyAdded:after {
    content:"";
    width: 100px;
    height: 100px;
    top: 0;
    right: 0;
    position:absolute;
    background-color: red;
} 

/* if you want the hover effect */
.dynamicallyAdded:hover:after {
    content:"";
    background-color: green;
}

Working Fiddle

Working Fiddle (with an image)

Upvotes: 0

Samuel Liew
Samuel Liew

Reputation: 79113

<div class="hasicon">
    <img src="blah.jpg" class="icon" />
</div>

CSS:

.icon { display: none; }
.hasicon { position: relative; }
.hasicon .icon {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

jQuery: 

$('body').on('click', '.hasicon > .icon', function() {
    // do something
});

To use this, simply add class hasicon to the div. Those divs without the class will not display the icon.

UPDATE:

You could try using an empty span, if it suits your requirements better:

<div class="hasicon">
    <span></span>
</div>

CSS:

.hasicon { position: relative; }
.hasicon > span {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: url('myImage.png') center no-repeat;
}

jQuery: 

$('body').on('click', '.hasicon > span', function() {
    // do something
});

Upvotes: 3

Jack Cole
Jack Cole

Reputation: 1804

Image not being displayed:

<div class="DivWithImage">
    <img src="blah.jpg" class="thumbIMG">
</div>

Image being displayed:

<div class="DivWithImage">
    <img src="blah.jpg" class="thumbIMG shown">
</div>

CSS:

.DivWithImage .thumbIMG{
    position: absolute;
    right: 0px;
    top: 0px;
    display:none;
}
.DivWithImage .thumbIMG.shown{
    display:block;
}

You then need to use javascript to apply or remove the class shown.

Upvotes: 0

Related Questions