DEMO

HTML

innerはむだな気がしますが、z-indexを制御する用に設置しています。

html

  1. <div class="bg-scale">
  2.     <div class="inner">
  3.         <p>Background Scale Animation</p>
  4.         <a href="#" class="btn-more">Article</a>
  5.     </div>
  6. </div>

CSS

背景画像をafter擬似要素に指定して重ねることで要素を拡大しても、文字などに影響がないようにします。
あとは「bg-scale」に「overflow: hidden;」を指定すればafterを拡大アニメーションしてもはみ出ないですね。

css

  1. .bg-scale {
  2. 	position: relative;
  3. 	overflow: hidden;
  4. 	text-align: center;
  5. 	border-top: solid 1px #596456;
  6. 	border-bottom: solid 1px #596456;
  7. 	text-shadow: 0 0 12px #7b7a35;
  8. 	padding: 60px 0;
  9. }
  10. .bg-scale:after {
  11. 	position: absolute;
  12. 	content: "";
  13. 	display: block;
  14. 	width: 100%;
  15. 	height: 100%;
  16. 	top: 0;
  17. 	background: url(bg.jpg) no-repeat center center;
  18. 	-webkit-background-size: cover;
  19. 	-moz-background-size: cover;
  20. 	-ms-background-size: cover;
  21. 	background-size: cover;
  22. 	-webkit-transition: all .3s ease-out;
  23. 	-moz-transition: all .3s ease-out;
  24.     -ms-transition: all .3s ease-out;
  25. 	transition: all .3s ease-out;
  26. }
  27. .bg-scale:hover:after {
  28. 	opacity: .8;
  29. 	-moz-transform: scale(1.2);
  30. 	-webkit-transform: scale(1.2);
  31. 	-ms-transform: scale(1.2);
  32. 	transform: scale(1.2);
  33. }
  34. .bg-scale .inner {
  35. 	z-index: 1;
  36. 	position: relative;
  37. }