Help with css-ing around with an image


#1


Hello everyone, i need a bit of help, well more advice and knowledge if what i want to do is doable using html/css only. So i have two columns with images, one is left one is right, my code works how i want it to for left side, because resizing my image is done in -> direction, but when i expand them on right side they get a weird twitchy moment, how can i remove that?(i know i probably cant use left:-30% so im looking for a replacement on that one )


.n
{
	height:105%;
	width:100%;
	transition: width 0.5s;
}
.n:hover
{
	height:130%;
	width:130%;
}
.a
{
	height:105%;
	width:100%;
	transition: width 0.5s;
}
.a:hover
{
	position: relative;
	
	height:130%;
	width:130%;
	left:-30%;
}


#2

can you provide all the css code and html code we need to tackle this problem?


#3

Oh im sorry.here it comes

HTML


 <!DOCTYPE html> 
  <html>
  <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  
<link rel="stylesheet" type="text/css" href="galerija.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
<title>GALERIJA</title>
 </head>
 <body>


<div class="zaglavlje"><!--POCETAK ZAGLAVLJA-->


    <div class="logo">
        <a href="iNEWINDEX.html"><img id="logo" src="defqonlogo.png"></a>
    </div>



    <div id="naslov">
        <a href="NEWINDEX.html"><img id="naslov" src="naslov.png"></a>
    </div>



    <div>
        <ul class="fa-ul">

            <li> <a href="https://www.facebook.com/Defqon1/" target="_blank"><i id="icon1" class="fa fa-facebook-square" aria-hidden="true"></i></a></li>
            <li><a href="https://twitter.com/q_dance" target="_blank"><i id="icon2" class="fa fa-twitter-square" aria-hidden="true"></i></a></li>
            <li><a href="https://www.youtube.com/user/Qdancedotnl" target="_blank"><i id="icon3" class="fa fa-youtube-play" aria-hidden="true"></i></a></li>
            <li><a href="http://www.defqon1.nl/" target="_blank"> <i id="icon4" class="fa fa-home" aria-hidden="true"></i></a></li>
        </ul>
    </div>

</div>









<center>
    <h1>GALERIJA</h1>
</center>

<table>

    <tr>
        <th>NETHERLANDS</th>
        <th></th>
        <th>AUSTRALIA</th>
    </tr>
    <tr>
        <td><img class="n" src="https://c1.staticflickr.com/8/7489/27965861136_7bfe4a13ca_b.jpg"</th>
        <td class="srediste">2016</th>
        <td><img class="a" src="https://i.ytimg.com/vi/KTkvw8dg1J8/maxresdefault.jpg">
        
    </tr>
    <tr>
        <td><img class="n" src="http://daily-beat.com/wp-content/uploads/2015/06/mainstage2-750x499.jpg">
        <td class="srediste">2015</th>
      <td> <img class="a" src="http://www.hardnews.nl/wp-content/uploads/2015/09/defqon-australia-2015-day.jpg">
    </tr>
    <tr>
        <td><img class="n" src="https://smileradio.net/sites/default/files/cover/10497157_10152316599839775_1638612844878368374_o.jpg">
        <td class="srediste">2014</th>
        <td><img class="a" src="https://i.ytimg.com/vi/hT7QZqHtRm4/maxresdefault.jpg">
    </tr>
    <tr>
        <td><img class="n" src="https://s-media-cache-ak0.pinimg.com/originals/04/73/ff/0473fff4a1bbdd3f120d9df63b685d19.jpg">
        <td class="srediste">2013</th>
        <td><img class="a" src="https://i.ytimg.com/vi/iZ-cDDX_fHw/maxresdefault.jpg">
    </tr>
    <tr>
        <td><img class="n" src="https://i.ytimg.com/vi/SCbbKskNzN8/maxresdefault.jpg">
        <td class="srediste">2012</th>
        <td><img class="a" src="http://alive-at-night.com/wp-content/uploads/2016/06/defqon-1-dragon.jpg">
    </tr>
   
</table>
  </body>
  <html>

CSS


body
{
	background-image: url(pozzz.jpg);
	background-size: cover;
	color:White;
}

																				/*					POCETAK ZAGLAVLJA 									*/
.zaglavlje
{
	position:absolute;
	width:100%;
	height:14%;
	box-shadow: 0px 40px 70px #000;
}


#logo
{
	float:left;
	position:absolute;
	width:170px;
	height:100%;
}

#naslov
{	
	float:left;
	position: absolute;
	width:300px;
	height:60%;
	left:100px;

}


#icon1
{
	margin-right:20px;
	float:right;
	display:inline;
	font-size:50px;
	z-index: 999;
	color:red;
}
#icon2
{	
	margin-right:20px;
	float:right;
	display:inline;
	font-size:50px;
	z-index: 999;
	color:red;
}
#icon3
{	
	margin-right:20px;
	float:right;
	display:inline;
	font-size:50px;
	z-index: 999;
	color:red;
}
#icon4
{	
	margin-right:20px;
	float:right;
	display:inline;
	font-size:50px;
	z-index: 999;
	color:red;
}	

																				/*					KRAJ ZAGLAVLJA 									*/



td
{	
	vertical-align: center;

	width:33%;
	width:500px;
	height:300px;
	box-shadow: 20px 20px 30px #000;
	text-align: center;
}

th
{
	column-span: 3;
	font-size: 30px;
	text-align: center;
}					

table
{
	align-self: center;
	border-spacing: 30px;
	width:100%;
}				


.n
{
	height:105%;
	width:100%;
	transition: width 0.5s;
}
.n:hover
{
	height:130%;
	width:130%;
}
.a
{
	height:105%;
	width:100%;
	transition: width 0.5s;
}
.a:hover
{
	position: relative;
	
	height:130%;
	width:130%;
	left:-30%;
}
.srediste
{
	font-size:50px;
	font-weight: bold;
}

#5

okay, i created a bin with your code

This is best i could come up with. What i did was use float: right, this will place the element as far to the right side as possible, thus the transition goes to the left. i also added transition for height


#6

Dear god you are amazing, huge thanks!!!!!!!!


#7