Plugin to change custom profile image

Asked

Viewed 755 times

0

Is there a plugin that from this effect + modal to exchange photo ? Or is it all done in CSS :

inserir a descrição da imagem aqui

html5 css3

  • Good should even exist, but for that to limit to plugins that can usually give a lot of stick that you will not be able to solve, if you can create your own using css and jquery ?

  • You can do exactly as in this image only with CSS quietly. Then just program the "send" and "remove" actions. In short, the design is peaceful only with CSS, but the back can’t tell you which would be the best option, but surely php solves the back part. If you want a similar CSS template speak there

  • @hugocsl would like a model yes!

1 answer

1


Follow a basic template as I said. With CSS it’s pretty easy to do no need plugin or library...

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0;
}
.box {
    display: flex;
    width: 100px;
    height: 100px;
    position: relative;
}
.avatar::after {
    opacity: 0;
    font-family: FontAwesome;
    content: "\f040";
    color: #fff;
    font-size: 2.5rem;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 4px;
    left: 4px;
    width: 92px;
    height: 92px;
    z-index: 2;
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: 350ms ease-in-out;
}
.avatar:hover::after {
    opacity: 1;
}

.avatar {
    box-sizing: border-box;
    border: 4px solid silver;
    border-radius: 50%;
    overflow: hidden;
}

.menu {
    position: absolute;
    opacity: 0;
    width: 100px;
    height: auto;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
    box-sizing: border-box;
    padding: 0.5rem;
    border-radius: 0.5rem;
    top: 60%;
    left: 60%;
    z-index: -1;
    transition: 350ms ease-in-out;
}
.box input {
    display: none;
}
.box input:checked + div.menu {
    opacity: 1;
    z-index: 999;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="box">
    <label class="avatar" for="btn">
        <img src="http://placecage.com/100/100" alt="">
    </label>
    <input type="checkbox" id="btn">
    <div class="menu">
        <a href="#"><i class="fa fa-upload"> <span>upload</span></i></a>
        <br>
        <a href="#"><i class="fa fa-edit"> <span>edite</span></i></a>
    </div>
</div>

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.