[Zweirad]

Hi Com,

bin neu hier und brauch dringend Eure Hilfe, weil ich nach etlichem hin und herprobieren es einfach nicht schaffe:

Ich habe mir eine "Hover" Effekt von einem Tutorial und habe diesen auf meiner Seite eingefügt, das hat auch alles geklappt: jetzt zeigt er unten aber immer einen Rand und den würde ich gerne wegbekommen:

Hier der Code:

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
    <div class="hovereffect">
        <img class="img-responsive" src="http://placehold.it/350x250" alt="">
            <div class="overlay">
                <h2>Effect 12</h2>
				<p> 
					<a href="#">LINK HERE</a>
				</p> 
            </div>
    </div>
</div>

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
  background: #42b078;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 50px 20px;
}

.hovereffect img {
  display: block;
  position: relative;
  max-width: none;
  width: calc(100% + 20px);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(-10px,0,0);
  transform: translate3d(-10px,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hovereffect:hover img {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  overflow: hidden;
  padding: 0.5em 0;
  background-color: transparent;
}

.hovereffect h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  content: '';
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
  -webkit-transform: translate3d(-100%,0,0);
  transform: translate3d(-100%,0,0);
}

.hovereffect:hover h2:after {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.hovereffect a, .hovereffect p {
  color: #FFF;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
}

.hovereffect:hover a, .hovereffect:hover p {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

Das stand noch dabei:

Note: if not using bootstrap and you wish to use the hover simply remove the classes on the first div "col-lg-3 col-md-4 col-sm-6 col-xs-12" and give this div a chosen size eg width: 300px

! Im Anhang ist ein Bild, da ist zusehen, welchen Abstand ich meine (der rote unter dem Bild)

Vielen Dank schonmal für Eure Hilfe!
LG

[cloned]

Füge ich deinen code auf jsfiddle.net ein sehe ich diesen Rand nicht. Hast du dein Beispiel auch überprüft?

[Zweirad]

Das habe ich natürlich noch nicht ausprobiert..
ich nutze DIVI (Theme und Page Builder) und Wordpress als CMS. Eigentlich habe ich das Padding auf 0 gesetzt :/

[cloned]

Dann kann ich dir nur raten, nimm die Webentwickler-Tools und schau nach, welches Element hier einen Abstand verursacht.

[Zweirad]

Wie meinst Du das? Das rote was man da unten sieht, ist der "background" und das image liegt nur dadrüber! - das bild wird nur falsch skaliert..

[cloned]

Ich meine du öffnest die Webdeveloper-Tools und schaust, wieso das Bild kleiner dargestellt wird als gewünscht. Also entweder gibt es ein margin/padding irgendwo oder das Bild kann gar nicht größer werden und deshalb nicht alles verdecken. oder sonst etwas. Ohne direkten Link zur Seite oder ohne Beispiel wo man das Nachvollziehen kann, kann man leider nicht wirklich mehr sagen.