我们可以使用CSS的伪类选择器:before和:after来分别给单选按钮添加两张图片，从而实现这个效果。

HTML代码:

CSS代码：

.radio-checkmark {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ddd;
  box-sizing: border-box;
  margin-right: 10px;
}

/* 给单选按钮添加第一张图片 */
.radio-checkmark:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("image1.png") no-repeat center center;
  background-size: contain;
}

/* 给单选按钮添加第二张图片 */
.radio-checkmark:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("image2.png") no-repeat center center;
  background-size: contain;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* 当单选按钮被选中时，显示第二张图片 */
.radio-container input:checked + .radio-checkmark:after {
  opacity: 1;
}

以上代码中使用了伪类选择器:before和:after来实现两张图片效果，这需要在CSS中设置content属性，代表选中状态下的图片通过input:checked选择器来控制.opacity属性控制图像的透明度，transition属性控制选中状态下图片的过渡效果。