Interactive area of linked images with rounded corners - html

I'm building this little widget: http://codepen.io/JonnyNineToes/pen/zGYxwV
It's basically an image that you can click, and have extra info about the image "slide out" from behind it.
The problem I'm having is with the clickable/hoverable/interactive area of the widget. Even though I've used border-radius, I'm still getting a square-shaped clickable area around the widget. (Hover your mouse where the corners of the box should be.)
I've determined the source of the problem to be the with the image element itself. If I remove the image element, I no longer have this problem.
I already found this...
Why is the margin space of my image link clickable?
I removed the "display: block;" rule from the class of the image, and I still have the problem with this "ghost area".
I'm not sure what's going on with this element. These are the only styles applied to it (".profile" is the class of the image):
.profile, .description {
position: absolute;
border-radius: 150px;
width: 300px;
height: 300px;
}
.profile {
left: 0;
top: 0;
z-index: 2;
}
EDIT: I've also toyed around with "overflow: hidden;" as some Stack Overflow threads suggested, but this hasn't helped either.
EDIT 2: Found these:
Should border-radius clip the content?
How do I prevent an image from overflowing a rounded corner box with CSS3?
CSS3 border-radius clipping issues

A solution that seems to work for Chrome (Firefox 37 seems to work as expected) is to use another element with a background image set. Everything else is the same. Of course you lose the alt attribute. If the image you're using is more than aesthetic, then you should find a way to serve that information another way, or stick to the <img /> tag.
<span style="background: url('http://i.imgur.com/BfLc7dD.jpg')" class="profile">
Codepen Example

Related

Bootstrap : block image resizing

I'm using a YouTube picture below one for example :
and Bootstrap to display it:
<img src="{{img}}" alt="{{title}}" class="img-circle" width="60px" height="60px">
But the picture is crushed:
Am I missing a bootstrap property ? or a common hack ? Thanks !
Edit :
I finally found a trick to do the job :
<div class="crop">
<img src="https://i.ytimg.com/vi/EONhJ9qvCPY/default.jpg" alt="#" >
</div>
And
.crop{
width: 60px;
height: 60px;
overflow:hidden;
position:relative;
border-radius: 50%;
}
.crop img {
position: absolute;
left: -27px;
top: -18px;
}
What do you mean by picture is crushed? You're against the picture being in a circle, or the way it displays in the circle?
I think first of all it's crucial to understand, bootstrap as in whole is a framework containing rules for html, css & javascript. So to answer your question, there is no property/hack orso you're missing.
The reason why it displays like it displays, is because the image does not properly fit into the 60x60 image (or rather the crop of it in the circle) therefore, it crops out the parts that do not fit.
What I'm saying is, although it may not visually look like it, it still takes the 60x60 block and just puts a circle inside it and renders the outskirts transparent. There is virtually no way to avoid this, other than resizing the original picture.
So either
a) Edit the original picture in mspaint/photoshop/gimp whatever so it will fit better inside the circle crop
b) Go inside the bootstrap CSS properties and change the width and height properties of the img. Alternatively set a max-width and max-height for the images so it will not be stuck inside the 60x60 definition.
img {
width: value;
height: value;
}
The reason why you'd want to do it like that, is because in case you will want to use such an image in future, you will not have to specify the width and height properties through HTML code (which is causing you unnecessary displaying issues and code-readability problems to begin with), but it will automatically apply it to every element using the CSS rules.

Trying to add an "information button" to the pictures on my page that only appears when hovering

The picture I'm trying to paint is this:
I have an image of a painting in the center of my page. When I hover over the painting, I want an info icon (a small "i") to appear anchored in the top right of my image. I've placed the "i" icon simply on top of the other image. I know this is incorrect, but I don't know how to anchor it relative to the dimensions of the painting image.
Furthermore, when I hover over the "i", I want it to popup a small box with 3 lines of text (for the title of the painting, the size, and the year it was made.)
I've tried a few different methods, but none of them seem to work, so I strip the code back down to this before I try something else.
<div style="position: relative; left: 0; top: 0;">
<img src="Placeholder.jpg" style="position: relative; top 0; left: 0;"/>
<img src="info.gif" style="position: absolute; top: 30px; right:320px"/>
</div>
Are you trying to do this purely through CSS? If the info.gif was a child element of the placeholder.jpg it would work, and you could do this by swapping the img for a div or span using the background-image: url() CSS selector and then using the:
img[src=Placeholder.jpg]:hover {
img[src=info.gif] {
display: block;
}
}
However, I think you're correct in using the correct image markup and you can do what you are trying to achieve with the:
.hover() // functionality
I have attached a JSFiddle here and attached the jQuery hover event to give you a bit more background.
I have used example code with an image, and an info image showing that hovering on the picture shows the icon, and then hiding the icon when the user leaves the picture.
Hope this helps!

how to remove the space when the image is clipped using css

when clip property of the css then the image is clipped but the problem is, the clipped part of image reserve the space.Is there any way to remove that space after image is clipped.
HTML Code
// image with id: clip2
<img id="clip2" src="image/background_right.png" style="height:100%; width:100%; max-width:350px; float:left;"/>
CSS Code
// code for clipping image
#clip2
{
position: absolute;
clip: rect(0px, 150px,600px,0px);
}
The clip property has been deprecated, so it may never work reliably.
If you could, please add a bit more detail about your intended goals, and maybe a screenshot or a sample of your code so we can show you some alternatives which work with modern standards.
clip (and the more recent clip-path) merely defines a path for clipping, it doesn't change the width/height of the element being clipped.
You can achieve what you want by using a div element with the size you want and set the image as a background image.
#clip2
{
position: absolute;
background-image: url("image/background_right.png");
width: 150px;
height: 600px;
}
<div id="clip2"/>

zIndex issue in Internet Explorer 9 & 10

Reading this question you're probably thinking 'not again' and want to mark it as duplicate. But after I've tried about every fix I could find up here and in other parts of the internet I couldn't think of another way to get a solution than asking here.
The problem is: I have a container, which should be completely clickable. The problem in this particular website is, that we can not control what elements will be inside of the container. Since there could be block-elements inside, we can't use an <a> tag instead of <div> as the container. We also want to the site to work in a no-js environment, so an onclick on the container is a no-go unfortunately.
That's why we choose an absolutely positioned <a> which will be an overlay for the entire container. This works well in every browser, except for IE.
In IE all content of the container is painted above the <a>, thus making it a non-clickable area. This isn't really much of a problem with the example here: just a small piece of text. But in other container we have images, tables etc. which completely fill the size of the container.
Even if I'd change the z-index of the <p> to 0 and the z-index of the <a> to 1, the paragraph is still on top of the link. How is this possible? I've read all about stacking contexts and levels, and I still can't find a single thing wrong in my code.
Note: there's a display: hidden; <span> in the <a>, but that's for internal use and I don't think it will affect this issue.
Note: the div.content__container has a parent from which it can get the 100% dimensions.
HTML:
<div class="content__container">
<p class="__align-to-bottom __right" >text <span class="__icon">f</span></p>
<span>text</span>
</div>
CSS:
.content__container {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.content__container > *{
position: relative;
}
.__align-to-bottom {
position: absolute !important;
bottom: 0;
left: 0;
}
.__align-to-bottom.__right {
left: auto;
right: 0;
}
a.__link {
position: absolute !important;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
a.__link span{
display: none;
}
As said this works fine in every browser out there except for IE. I'm currently testing in 9 & 10 and I'm guessing IE<9 isn't going to be a walk in park either.
EDIT
As suggested I've created a fiddle. In this fiddle I've already implemented some remarks. Such as the display: block; line for a.__link and removing the content__container > *{} from my css. I've added some JS to clarify which element is being clicked on. In IE it's still not working: the onclick event from the paragraph is being triggered.
I came across an issue like this once where I had a blank link positioned absolutely over the top of some content I wanted to be clickable - I tried everything to get it to work and finally found a really dirty hack:
Make a transparent gif or png (has to be at least 50x50) and then use it as the background of the anchor. It should then be clickable, if it is the highest z-index
I take it your link is a block element and actually covers the 100% height and width too
Since there could be block-elements inside, we can't use an <a> tag instead of <div> as the container.
Why not? Are block-level elements allowed inside inline-level elements in HTML5?
ps. Your fiddle code works in IE8.

Vertically position an image inside a div

I have a problem I'd like some help with. Thankfully my code can be flexible, so I'll just give some generic markup.
My major limitation (due to the way I am retrieving the information from a database) is that the images CANNOT be background images, otherwise this would be easy.
I simply want an image to change when I hover over it. I have made an image twice as high as I need it - half colour, half black and white. The idea is, the image is exactly the same (a person) - but when you hover over it - you see the colour version.
I have constructed my 'hover' image 200 pixels wide, and 400 pixels high. It is marked up very simply:
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='.....' alt='....' />
</div>
</div>
So I am figuring I need something like:
.staff_image {
float: left;
height: 200px;
width: 200px;
}
The trouble is - using this, the 400px high image displays by default in the centre of that staff_image div - so I see half the black and white photo, and half the colour.
I am going to be using jQuery to do the hover - so just need some CSS tips on what properties I need to use to:
Have the image display at the very top
Have the image display from halfway down
Everything I try with padding and margin seems to push all content down, and doesn't move the actual picture inside at all. I basically need to know how to maneuver an image that is too tall for a fixed height div around WITHIN that div. And none of the answers I can find here seem to help. There are lots of them on centering an image - but centering is NOT what I want to do - it's the opposite! :)
Thanks for any help.
Here you go: http://jsfiddle.net/xqxSK/
<div class='staff_profile'>
<h3>Staff Title</h3>
<div class='staff_image'>
<img src='http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6' />
</div>
</div>
.staff_image {
overflow: hidden;
height: 200px;
}
.staff_image img {
position: relative;
}
.staff_image:hover img {
top: -200px;
}
I'm using CSS instead of jquery for the hover. This is a better approach, since it works better on touchscreen devices.