JSFiddle - React, Tailwind, and code Playground

HTML

<div class="mydiv">
<section>
     <a href="#alert" class="button"><img src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/doge_org.gif"  /></a>
</section>
<div class="box-target" id="alert">
  <img src="http://tp3.sinaimg.cn/2175915602/180/5705233498/1">
  <a class="box-close" href="#"></a>
</div>
</div>

SCSS

.mydiv {
  position:relative;
  left:100px;
  top:100px;
}

/**
By Go7hic
jsfiddle 上面的 sass 不带 Compass 也是醉了，所以几个css3属性的混合宏不能直接调用，还是直接用css写出来吧。
**/
body {
  background: #333;
  font-size: 1em;
  color: #f0f0f0;
  line-height: 1.1em;
}
a {
  text-decoration: none;
  color: #313131;
  &:hover {
    color: #000;
  }
}
section {
  width: 500px;
  margin: 0 auto;
  background: #555;
  padding: 1em;
}

a.button {
	display: inline-block;
	background: #999;
	color: #f2f2f2;
	border-radius: 50%; /* 直接写啦,后面的也是 */
	padding: 10px 1em;
    box-shadow: 0 3px 0 #777; 
	font-size: 1.3em;
	text-decoration: none;
}

.box-target {
	position: fixed;
	top: -100%;
	width: 100%;
	background: rgba(0,0,0,.7);
	opacity: 0;
	transition: opacity .5s ease-in-out;
	overflow: hidden;
     img {
        margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 0%;
		max-width: 0%;
		border: 3px solid #fff;
		box-shadow: 0 0 8px rgba(0,0,0,.3);
		box-sizing: border-box;
	    transition: .5s ease-in-out;
     }
	&:target {
		opacity: 1;
		top: 0;
		bottom: 0;
        img {
            max-height: 100%;
            max-width: 100%;
        }
		.box-close {
			top: 5%;
		}
	}
}

.box-close {
	display: block;
	width: 50px;
	height: 50px;
	box-sizing: border-box;
	background: #139dd7;
	color: #fff;
	position: absolute;
	top: 10%;
	right: 5%;
	transition: .5s ease-in-out;
    &:before, &:after {
		content: " ";
		display: block;
		height: 30px;
		width: 1px;
		background: #fff;
		position: absolute;
		left: 26px;
		top: 10px;
		transform: rotate(45deg);
	}
	&:after {
		transform: rotate(-45deg);
	}
}