Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div key={index} className='vote_img_div active_imgvote_border'>
- <div className="vote_img unchange_div">
- //contents
- </div>
- <div onClick={() => this.handleClick(content.post_poll_content_id)}
- className={((this.state.voted_id === content.post_poll_content_id && this.state.active) ? 'vote_card_hover active' : 'vote_card_hover')}>
- </div>
- </div>
- .vote_img_div {
- width: 292.5px;
- display: inline-block;
- margin-left: 8.25px;
- margin-bottom: 5px;
- overflow: hidden;
- position: relative;
- background-color: whitesmoke;
- transition: all .2s ease-in-out;
- }
- .vote_img {
- width: 100%;
- height: 100%;
- position: relative;
- cursor: pointer;
- }
- .vote_card_hover {
- position: absolute;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- height: 100%;
- width: 100%;
- overflow: hidden;
- opacity: 0;
- transition: .3s ease;
- background: rgba(0, 0, 0, .70);
- }
- .vote_card_hover:before {
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%) scale(0);
- width: 500px;
- height: 500px;
- background: rgba(0, 111, 147, 0.70);
- transition: transform 0.8s ease;
- border-radius: 50%;
- }
- .vote_card_hover.active:before {
- transform: translate(-50%, -50%) scale(1);
- }
- .vote_img_div:hover .vote_card_hover {
- opacity: 1;
- cursor: pointer;
- -webkit-transform-style: preserve-3d;
- -webkit-transform: translate3d(0, 0, 0);
- }
Add Comment
Please, Sign In to add comment