Transform:scale and :nth-child() selector don't work

Question

I'm currently learning HTML5 / CSS / jQuery. I wanted to make a simple article thumbnails with CSS-based animations. I am using CodePen to easily share these small things. Unfortunately i found out few problems, i don't kno how to solve.

1. Scale Transform My first problem is that scale transform, which is added to the class .singleArticle doesn't work. It's probably becouse of conflit with some other class, but i cant find it.

.singleArticle:hover {
   -webkit-box-shadow: 0 10px 20px 5px rgba(1, 1, 1, 0.1);
   box-shadow: 0 10px 20px 5px rgba(1, 1, 1, 0.1);
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -o-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
}

2. FontAwsome Second problem is :nth-child() selector. I would like to learn how it exactly work in practise (that's why i'm using it here). I tried already many things and can't find where the bug is.

.singleArticle .cover {
   height: 250px;
   background-size: cover;
   background: #ccc;
   width: 100%;
   color: white;
   background-position: center;
   background-size: cover;
}

.singleArticle .cover:nth-child(1) {
   background-image: url("http://www.surfermag.com/wp-content/uploads/2015/12/DecodingStyle_5.jpg");
}

.singleArticle .cover:nth-child(2) {
   background-image: url("http://www.fatbmx.com/uploads4/2014Q1/viki1.jpg");
}

3. Firefox Browser All blocks are invisible in firefox. Also can't find any solution.

Can you point, where do i make mistakes, please? Probably the easiest way is just to take a look on codepen, as it's probably not best idea to place whole code here.

http://codepen.io/danzawadzki/pen/vymVed

Answer 1

Should work fine.

.singleArticle .cover {
  /* You can just use 'background' */
  background: #ccc url("") center/cover no-repeat;
  color: white;
  height: 250px;
}

/* nth-child selector for .singleArticle, that applies to .cover */

.singleArticle:nth-child(1) .cover {
  background-image: url("http://www.surfermag.com/wp-content/uploads/2015/12/DecodingStyle_5.jpg");
}
.singleArticle:nth-child(2) .cover {
  background-image: url("http://www.fatbmx.com/uploads4/2014Q1/viki1.jpg");
}
.singleArticle:hover {
  box-shadow: 0 10px 20px 5px rgba(1, 1, 1, 0.5);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  /* just extra visual effect */
  transition: box-shadow 300ms, transform 300ms;
  z-index: 1;
}

<div class="singleArticle">
  <div class="cover"></div>
</div>
<div class="singleArticle">
  <div class="cover"></div>
</div>