Image Hover Changing Color and Border-Radius

Question

I have a design for website galleries. I have an image that when I hover on it, it will change the image with a color or image and show the title of the image. Maybe this image can describe my problem (no. 1):

My next question is: is it possible to make border radius not rounded but narrowed like my image (no. 2), because I will have a container with left border like that.

Answer 1

Regarding problem number one, you can try something like this. It is simply done by absolute positioning of css! You can also look for tons of plugins available online for this. The JSFiddle for this goes here: http://jsfiddle.net/amitdatta/z4gY8/

HTML

<div class="thumb">
    <img src="http://www.hdpaperwall.com/wp-content/uploads/2014/01/beautyful_scenery-2560x1600.jpg" width="350px" />
    <div>
        <div>
            <p>CAPTION GOES HERE</p>
        </div>
    </div>
</div>

CSS

.thumb {
    position: relative;
    width: 350px;
    overflow: hidden;
}
.thumb img {
    width: 100%;
    padding: 0;
}
.thumb > div {
    background-color: rgba(21, 29, 29, 0.75);
    opacity: 0;
    position: absolute;
    width: 100%;
    bottom: 5px;
    left: 0;
    -webkit-transition: opacity 0.3s linear;
    text-shadow: #000 1px 1px 0;
    color: #ccc;
}
.thumb:hover > div {
    display: block;
    opacity: 1.0;
}
.thumb > div div {
    padding: 10px 20px;
}
.thumb p {
    color: #FFF;
    font-size: 16px;
    text-align: center;
    margin-bottom: 10px;
}

Regarding your problem number two, you can try the following code. Now-a-days you can draw any regular shape using CSS easily! The JSFiddle for this goes here: http://jsfiddle.net/amitdatta/Ean2z/

HTML

<div id='shape'></div>

CSS

#shape {
    width: 350px;
    height: 200px;
    background: red;
    position: relative;
}
#shape:before {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 70px solid red;
    border-left: 70px solid #FFF;
    width: 42px;
    height: 0;
}