Develop Reference

How Do I Uncheck A Checkbox When Navigating Backwards Or Forwards Between A Web Page?

I have a responsive hamburger menu made with a checkbox that works without any issues. What I'd like to be able to do is uncheck the checkbox when going backward or forward (navigating between pages). I would like it so that when I use the backward or forward button on a web browser the box is unchecked and the menu disappears.
This is the Javascript that I've tried but have not been able to get working properly:
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward"){
$('checkbox').removeAttribute('checked');
}
If anyone knows of a way to uncheck a checkbox and have it so a hamburger menu doesn't appear when navigating between web pages I'd appreciate you sharing your knowledge. Thank you.
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward") {
$('checkbox').removeAttribute('checked');
}
.body {
background-color: white;
font-family: sans-serif;
}
.searchbar {
float: right;
}
.image {
text-align: center;
}
.setsumei {
margin-left: 20px;
margin-right: 20px;
}
.footer {
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;
}
.page-wrap {
min-height: 100%;
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
#media (max-width: 1130px)and (min-width: 280px) {
.responsive-image-container {
display: flex;
flex-direction: column;
text-align: center;
}
img {
width: 85%;
}
}
*,
*:before,
*:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol,
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;
}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon>span:before,
.cp_menuicon>span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon>span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon>span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked+.cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked+.cp_mobilebar span:before,
#cp_toggle03:checked+.cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked~.cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked~.cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked~#h-menu_black {
display: block;
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll {
overflow: hidden;
position: fixed;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox">
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden; padding-bottom: 10px; font-size: 15px;">
<li style="border-bottom: 1px solid lightgray;">ホーム</li>
<li style="border-bottom: 1px solid lightgray;">ブログ</li>
<li style="border-bottom: 1px solid lightgray;">このサイトについて</li>
<li style="border-bottom: 1px solid lightgray;">参考文献</li>

Change javascript instead of hover to a set time

I found this flip animation on the internet and I was wondering: How can I change the javascript that instead of hovering over the image will cause the flip, a set time wil? So for instance after 3 seconds, the animation will start.
I am not so good with javascript yet and I am hoping someone can help me out
Thank you very much If you know the solution!
$(document).ready(function() {
$(".container").hover(function() {
$(".card").toggleClass('flipped')
}, function() {
$(".card").toggleClass('flipped')
});
})
h1 {
text-align: center;
}
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>

Why not do it with CSS?
On hover pseudo class with a transition:
h1 {
text-align: center;
}
.container {
--card-transition-duration: 1s;
--card-transition-delay: 4s;
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transition: transform var(--card-transition-duration) ease var(--card-transition-delay);
transform-style: preserve-3d;
transform-origin: right center;
}
.container:hover .card {
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.card .back p {
margin: auto;
}
.card .back {
background: blue;
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>
Or by itself with #keyframes animation:
h1 {
text-align: center;
}
.container {
--card-transition-duration: 1s;
--card-transition-delay: 4s;
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transition: transform var(--card-transition-duration) ease var(--card-transition-delay);
transform-style: preserve-3d;
transform-origin: right center;
animation-name: flip;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
.card .back p {
margin: auto;
}
.card .back {
background: blue;
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
#keyframes flip {
0% {
transform: translateX( 0%) rotateY( 0deg);
}
35% {
transform: translateX( 0%) rotateY( 0deg);
}
65% {
transform: translateX( -100%) rotateY( -180deg);
}
100% {
transform: translateX( -100%) rotateY( -180deg);
}
}
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>

First, that's not justjavascript, it's jQuery. If you want the animation to start with a delay using the jquery code, you can add a setTimeout.
And if you use the callback function of the hover method, use add/remove class not toggle.
You could do it in multiple ways, even with just CSS and animations.
$(document).ready(function() {
$(".container").hover(function() {
setTimeout(() => { $(".card").addClass('flipped')},3000)
}, function() {
$(".card").removeClass('flipped')
});
})
h1 {
text-align: center;
}
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
display: inline-block;
}
#main {
border: 1px solid black;
}
button {
width: 30%;
height: 10%;
margin-top: 100px;
cursor: default;
}
.card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-o-transform-origin: right center;
transform-origin: right center;
}
.card.flipped {
-webkit-transform: translateX( -100%) rotateY( -180deg);
-moz-transform: translateX( -100%) rotateY( -180deg);
-o-transform: translateX( -100%) rotateY( -180deg);
transform: translateX( -100%) rotateY( -180deg);
}
.card div {
height: 100%;
width: 100%;
color: white;
text-align: center;
font-weight: bold;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
.card .front {
background: red;
display: flex;
justify-content: center;
align-items: center;
}
/*
.card .front p {
margin-top: 100px;
}
*/
.card .back p {
margin: auto;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg);
-moz-transform: rotateY( 180deg);
-o-transform: rotateY( 180deg);
transform: rotateY( 180deg);
display: flex;
justify-content: center;
align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div id="main"><br>
<section class="container">
<div class="card">
<div class="front">
<p>Test</p>
</div>
<div class="back">
<p>MyBack</p>
</div>
</div>
</section>
</div>
</div>

Change the ready function to the one below.
$(document).ready(function () {
window.setInterval(function () {
$(".card").toggleClass("flipped");
}, 3000);
});

JQuery, CSS and hover tag re-code

.social-icon-holder {
float: left;
padding-left: 10px;
}
.social-icon {
width: 40px;
height: 40px;
font-size: 30px;
text-decoration: none;
cursor: pointer;
text-align: center;
line-height: 40px;
position: relative;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
/* background: #000;*/
color: #fff;
float: left;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
border: 3px solid #fff;
}
.social-icon:hover {
color: #fff;
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.social-icon:hover .front {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-icon:hover .back {
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.social-icon .front,
.social-icon .back {
width: 40px;
height: 40px;
position: absolute;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.social-icon .back {
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-icon .twitter .back {
background: #00ACED;
}
<div class="social-icon-holder">
<div class="social-icon">
<div class="twitter">
<div class="front">t</div>
<div class="back">t</div>
</div>
</div>
</div>
jsFiddle here
I did not produce the majority of the code.
The icon flips/rotates when a user hovers over the icon.
I realize this is done via the hover class.
However I would like to trigger this animation manually (via an event etc).
I understand it is not possible to trigger hover as it is not a trusted event.
Can someone help me re-code this so that the animation is triggered via jQuery?

In your css where you set the hover states, you could add a selector that does the same for a specific class. In my example I added the class hover, so the line .social-icon:hover now becomes .social-icon:hover, .social-icon.hover etc.
You can then toggle this class using jQuery's .toggleClass() function.
In the below example I do this using a button and a click event.
I added a background color just so the icon is more visible, so this has nothing to do with the actual answer ;)
$('#triggerHover').on('click', function() {
$('.social-icon').toggleClass('hover');
});
body {
background: #ccc;
}
.social-icon-holder {
float: left;
padding-left: 10px;
}
.social-icon {
width: 40px;
height: 40px;
font-size: 30px;
text-decoration: none;
cursor: pointer;
text-align: center;
line-height: 40px;
position: relative;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
/* background: #000;*/
color: #fff;
float: left;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
border: 3px solid #fff;
}
.social-icon:hover, .social-icon.hover {
color: #fff;
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.social-icon:hover .front, .social-icon.hover .front {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-icon:hover .back, .social-icon.hover .back {
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.social-icon .front,
.social-icon .back {
width: 40px;
height: 40px;
position: absolute;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
-moz-backface-visibility: visible;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.social-icon .back {
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.social-icon .twitter .back {
background: #00ACED;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social-icon-holder">
<div class="social-icon">
<div class="twitter">
<div class="front">t</div>
<div class="back">t</div>
</div>
</div>
</div>
<button id="triggerHover">Click me!</button>

Click a circle and make it the size of the section/div

Hi there I was wondering if it was possible so that when you click on a circle that it expands to fill the section/div that it is in?
I want that so when you click the circle it fills the screen and then some text appears in its place.
Before I posted this I took one more look on the web and found this jsfiddle
<div class="container">
<div class="ObjectContainer">
<div id="red" class="Object"></div>
<a href="#" >A link </a>
</div>
<div class="ObjectContainer">
<div id="brown" class="Object"></div>
<a href="#" >A link </a>
</div>
<div class="ObjectContainer">
<div id="dGrey" class="Object"></div>
<a href="#" >A link </a>
</div>
<div class="ObjectContainer">
<div id="Grey" class="Object"></div>
<a href="#" >A link </a>
</div>
</div>
body {
text-align:center;
font-family:helvetica;
font-size: 16px;
background: #f0f0f0;
padding-top: 50px;
}
a {
color: #f0f0f0;
text-decoration: none;
}
.container {
display: inline-block;
margin: 0 auto;
width: 400px;
}
/* ANIMATIONS */
.Object, .ObjectContainer a {
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.ObjectContainer {
width: 200px;
height: 200px;
float: left;
display: block;
position: relative;
overflow:hidden;
}
.ObjectContainer .Object {
display: block;
width: 100%;
height: 100%;
}
.ObjectContainer a {
position: absolute;
bottom: -200px;
left: 0;
opacity: 0;
width: 100%;
line-height: 0px;
text-align: center;
vertical-align: middle;
}
.ObjectContainer:hover .Object {
margin: 2.5%;
height: 95%;
width: 95%;
border-radius: 100px;
/* -webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-ms-transform: rotate(100deg);
-o-transform: rotate(100deg);
transform: rotate(100deg); */
}
.ObjectContainer:hover a {
opacity: 1;
bottom: 0;
line-height: 200px;
}
#red.Object {
background: #e7222f;
}
#brown.Object {
background: #796959;
}
#dGrey.Object {
background: #363635;
}
#Grey.Object {
background: #6f6f6e;
}
It is what I am looking for but the opposite way round.
Edit
I have more and less got it now by messing about with what yous have given me. Here is the link to the jsfiddle
All I have done was sawp about the code. I didn't even think of this at the start. I still need to work on the text layout (needs more spaced out) and might try to do it with a click base event.
#red.Object {
background: #e7222f;
margin: 2.5%;
height: 95%;
width: 95%;
border-radius: 100px;
}
#red.Object:hover {
background: #e7222f;
margin: 2.5%;
height: 95%;
width: 95%;
border-radius:0;
}

$(function(){
$('#circle').click(function(){
var pw = $('#wrapper').width();
var ph = $('#wrapper').height();
$(this).animate({
width: pw,
height: ph,
borderRadius: 0
},500)
});
});
#wrapper{
width: 300px;
height: 300px;
background: lightgrey;
}
#circle{
position: absolute;
width: 45px;
height: 45px;
background: green;
border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="circle"></div>
</div>

I changed the top two circles and is this the desired starting results you were looking for?
body {
text-align:center;
font-family:helvetica;
font-size: 16px;
background: #f0f0f0;
padding-top: 50px;
}
a {
color: #f0f0f0;
text-decoration: none;
}
.container {
display: inline-block;
margin: 0 auto;
width: 400px;
}
/* ANIMATIONS */
.Object, .ObjectContainer a {
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.ObjectContainer {
width: 200px;
height: 200px;
float: left;
display: block;
position: relative;
overflow:hidden;
}
.ObjectContainer .Object {
display: block;
width: 100%;
height: 100%;
}
.ObjectContainer a {
position: absolute;
bottom: -200px;
left: 0;
opacity: 0;
width: 100%;
line-height: 0px;
text-align: center;
vertical-align: middle;
}
.ObjectContainer:hover .Object {
margin: 2.5%;
height: 95%;
width: 95%;
border-radius: 100px;
/* -webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-ms-transform: rotate(100deg);
-o-transform: rotate(100deg);
transform: rotate(100deg); */
}
.ObjectContainer:hover a {
opacity: 1;
bottom: 0;
line-height: 200px;
}
#red.Object {
background: #e7222f;
margin: 2.5%;
height: 95%;
width: 95%;
border-radius: 100px;
}
#brown.Object {
background: #796959;
margin: 2.5%;
height: 95%;
width: 95%;
border-radius: 100px;
}
#dGrey.Object {
background: #363635;
}
#Grey.Object {
background: #6f6f6e;
}

Some quick hacks into your fiddle (shew!)
snippet below
function clicker(e){
//console.log(e.target.tagName);
var width=window.getComputedStyle(e.target,null)||e.target.currentStyle;
if(e.target.tagName=='DIV'){
if(width.borderBottomLeftRadius!='0px'){
e.target.style='width:100%;height:100%;border-radius:0px;';
e.target.children[0].style='opacity: 1;bottom: 100px;line-height: -20px;';
}
else{
e.target.style='width:95%;height:95%;border-radius:100px';
e.target.children[0].style='opacity: 1;bottom: 0px;line-height: 0px;';
}
} //endif
}
function add(x){
document.getElementsByClassName('ObjectContainer')[x].addEventListener('click',clicker,true)
}
for(i=0;i<document.getElementsByClassName('ObjectContainer').length;++i){
add(i);
}
/* setup the very basis for the document */
body {
text-align:center;
font-family:helvetica;
font-size: 16px;
background: #f0f0f0;
padding-top: 50px;
}
a {
color: #f0f0f0;
text-decoration: none;
}
.container {
display: inline-block;
margin: 0 auto;
width: 400px;
}
/* ANIMATIONS */
.Object, .ObjectContainer a, .test {
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.ObjectContainer {
width: 200px;
height: 200px;
float: left;
display: block;
position: relative;
overflow:hidden;
}
.ObjectContainer a {
position: absolute;
bottom: -200px;
left: 0;
width: 100%;
line-height: 0px;
text-align: center;
vertical-align: middle;
}
.ObjectContainer .Object {
margin: 2.5%;
height: 95%;
width: 95%;
border-radius: 100px;
/* -webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-ms-transform: rotate(100deg);
-o-transform: rotate(100deg);
transform: rotate(100deg); */
}
#red.Object {
background: #e7222f;
}
#brown.Object {
background: #796959;
}
#dGrey.Object {
background: #363635;
}
#Grey.Object {
background: #6f6f6e;
}
<div class="container">
<div class="ObjectContainer">
<div id="red" class="Object"> <a href="#" >A link </a></div>
</div>
<div class="ObjectContainer">
<div id="brown" class="Object"> <a href="#" >A link </a></div>
</div>
<div class="ObjectContainer">
<div id="dGrey" class="Object"> <a href="#" >A link </a></div>
</div>
<div class="ObjectContainer">
<div id="Grey" class="Object"> <a href="#" >A link </a></div>
</div>
</div>

How to create a smooth zoom and display an overlay when another HTML element gets hovered?

1st problem: I am trying to display the text overlay when the "point" class gets hovered, but for me works just the display when the "caption" class gets hovered, how to fix it?
2nd problem: I need to create a smooth zoom in image when the "point" class gets hovered, how can i do it?
Demo: http://jsfiddle.net/0qgcn2uu/12/
HTML:
<div class="caption">
<span class="point"></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<div class="caption__overlay">
<div class="caption__overlay__content">
<img id="hello" class="caption__media" src="http://2.bp.blogspot.com/-TH7ATkZ55uw/VOatQSMgt4I/AAAAAAAAAUM/bB199rdZMuE/s1600/alone.png" />
</div>
</div>
</div>
CSS:
.caption {
position: relative;
overflow: hidden;
-webkit-transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.captionHover::before {
background: rgba(248, 214, 215, .5);
}
/* I want that when i hover on the circle, the image would get this overlay, but this doesn't work */
.point:hover: + .caption::before {
background: rgba(248, 214, 215, .5);
}
.point {
position: absolute;
display: block;
height: 25px;
width: 25px;
border-radius: 30px;
background-color: black;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption {
display: inline-block;
}
.caption__media{
max-width: 100%;
}
jQuery:
$(document).ready(function() {
$(".point").mouseenter(function() {
$('.caption').addClass('captionHover');
});
$('.point').mouseleave(function() {
$('.caption').removeClass('captionHover');
});
});

All you need is the Adjacent sibling selector, General sibling selector and ftransform
*{
box-sizing: border-box
}
figure{
overflow: hidden;
width: 250px;
height: 250px;
margin: 50px auto;
z-index:1;
position: relative
}
figure span{
display: block;
width: 16px;
height:16px;
border-radius: 50%;
background: black;
z-index: 2;
position: absolute;
top: 10px;
left: 10px;
cursor: pointer
}
figure img, figure figcaption{
-webkit-transition: 1s ease
}
figure figcaption{
position: absolute;
top: 100%;
z-index: 2;
width: 100%;
left: 0;
text-align: center;
color: white
}
figure span:hover + img{
-webkit-transform: scale(2,2)
}
figure span:hover ~ figcaption{
top: 50%
}
<figure>
<span class=point></span>
<img src="http://www.blasdale.com/pictures/2007/Hendon/thumbs/IMG_3337.jpg" />
<figcaption>HELLO!</figcaption>
</figure>