.container {
  display: flex;
  width: 800px;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
}




.photo1 {
 position: relative;
 height: 150px;
 width: 100px;
 overflow: hidden;
 display: inline-block;
}

.photo1 img {
 height: 100%;
 width: 100%;
 object-fit: contain;
 display: block;
}


.word1 p{
 padding: 20px;
 display: flex;
 justify-content: center;
}
 
 
 
.photo1 .word1 {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.photo1:hover .word1 {
opacity: 1;
}



.yoi {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.yoi img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.text p {
  padding: 20px;
}

.yoi .text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.yoi:hover .text {
opacity: 1;
}




.aot {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.aot img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.text2 p {
  padding: 20px;
}

.aot .text2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.aot:hover .text2 {
opacity: 1;
}





.dororo {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.dororo img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.text3 p {
  padding: 20px;
}

.dororo .text3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.dororo:hover .text3 {
opacity: 1;
}



.haikyuu {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.haikyuu img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.text4 p {
  padding: 20px;
}

.haikyuu .text4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.haikyuu:hover .text4 {
opacity: 1;
}



.mirai {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.mirai img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.text5 p {
  padding: 20px;
}

.mirai .text5 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.mirai:hover .text5 {
opacity: 1;
}



.free {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.free img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.text6 p {
  padding: 20px;
}

.free .text6 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.free:hover .text6 {
opacity: 1;
}



.kiss {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.kiss img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.text7 p {
  padding: 20px;
}

.kiss .text7 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.kiss:hover .text7 {
opacity: 1;
}




.bf {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.bf img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.text8 p {
  padding: 20px;
}

.bf .text8 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.bf:hover .text8 {
opacity: 1;
}





.owari {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.owari img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.text9 p {
  padding: 20px;
}

.owari .text9 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.owari:hover .text9 {
opacity: 1;
}




.tpn {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.tpn img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.texta p {
  padding: 20px;
}

.tpn .texta {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.tpn:hover .texta {
opacity: 1;
}




.ass {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.ass img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.textb p {
  padding: 20px;
}

.ass .textb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.ass:hover .textb {
opacity: 1;
}


.yamada {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.yamada img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.textc p {
  padding: 20px;
}

.yamada .textc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.yamada:hover .textc {
opacity: 1;
}


.het {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.het img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.textd p {
  padding: 20px;
}

.het .textd {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.het:hover .textd {
opacity: 1;
}


.given {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.given img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.texte p {
  padding: 20px;
}

.given .texte {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.given:hover .texte {
opacity: 1;
}



.bsd {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.bsd img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.textf p {
  padding: 20px;
}

.bsd .textf {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.bsd:hover .textf {
opacity: 1;
}


.dn {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.dn img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.textg p {
  padding: 20px;
}

.dn .textg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.dn:hover .textg {
opacity: 1;
}



.balance {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.balance img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.texth p {
  padding: 20px;
}

.balance .texth {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.balance:hover .texth {
opacity: 1;
}



.hitorijime {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.hitorijime img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.texti p {
  padding: 20px;
}

.hitorijime .texti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.hitorijime:hover .texti {
opacity: 1;
}


.no6 {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.no6 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.textj p {
  padding: 20px;
}

.no6 .textj {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.no6:hover .textj {
opacity: 1;
}




.sk8 {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: hidden;
}

.sk8 img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.textk p {
  padding: 20px;
}

.sk8 .textk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.sk8:hover .textk {
opacity: 1;
}



.onepiece {
  height: 150px;
  width: 100px;
  position: relative;
  overflow: scroll;
}

.onepiece::-webkit-scrollbar {
  display: none;
}

.onepiece img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  display: block;
}

.textl p {
  padding: 20px;
}

.onepiece .textl {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
 height: 100%;
 color: white;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transition: opacity 0.3s ease;
}

.onepiece:hover .textl {
opacity: 1;
}