Some Css do not work properly (do not response at all) ? Advice please

[Chievo]

Here i have the problem , I am following the tutorial point to point and i am not achieving to work the .container part at all . here my code and the video ? I have checked everything and should be working but not . I have tried everything.Please give me an advice to see what i am doing wrongly . Many thanks !!

and the tutorials name in youtube is that one: CSS Responsive Card Hover Effects | Uncharted 4 Cards UI Design

[Marmiz]

Hey @Chievo, welcome to the forum.
I see that .card is a descendent of .container, remember that by the CSS Selector specification, the descendant selector is achieved with a space.

For example having an html like the following

<div class="a">
  <div class="b"></div>
</div>

If I want to select .b I have as options (but not limited to):

.a > .b {
/* child combinator */
}

.a .b {
/* descendant */
/* Note the space between .a and .b */
}

Hope it helps

[Chievo]

Many thanks Marmiz !!! Glad to receive a such prompt response from you . I have tried it in that way and still do not work. here the css code ( the html is the same ) .Any suggestions?

* {	margin: 0;
	padding: 0;
	box-sizing:border-box;
}

body {
	display:flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.container {
	position:relative;
	display:flex;
	justify-content: center;
	align-items: center;
}

.container .card {
	position:relative;
	width:600px;
	height:350px;
	margin:20px;
	display:flex;
	transition:0,5s;
	justify-content: flex-start;
	align-items: center;
	background:linear-gradient(45deg,#1a2f3f,#7094ce);
}

.container .card img {
	position:absolute;
	bottom: 0;
	left:50%;
	transform:translateX(-50%);
	height: 400px;
    transition:0.5s;
}

.container .card:hover img {
	left:73%
	height:500px;
}

.container .card .content {
	position:relative;
	width: 50;
	left:20;
	padding:20px 20px 20px 40px;
	opacity:0;
	visibility: hidden;
	transition:0,5;

}

.container .card:hover .content {
 	left:0;
 	opacity:1;
 	visibility: visible;
 }

.container .card .content h2 {
	color:#fff;
	text-transform:uppercase;
	font-size:2.2em;
	line-height: 1em;
}

.container .card .content p {
	color:#fff;
}

.container .card .content a {
	position:relative;
	color:#111;
	background:#fff;
	display:inline-block;
	padding:10px 20px;
	margin-top:10px;
	text-decoration: none;
	font-weight: 700;
}

@media (max-width:991px) {
	.container .card
	{
		width: auto;
		max-width: 600px;
		align-items: flex-start;
	}
	.container .card:hover
	{
		height:600px;

	}
	.container .card:hover img
	{ 
		left:50%
		height:350px;

	}
	.container .card .content
	{
		width:100%;
		left:0;
		padding:40px;
	}
}

any suggestions ?

[lasjorg]

It would be nice to have the HTML as well. You can post your code on Codepen.

You are missing the semicolon ; after left:50%

You do not have the 767px media query in your CSS which is where you would set the container to flex-direction: column which is what will stack the cards.